top of page

Use Props in React

Updated: Oct 16, 2023

To use props in React, you need to follow these steps:


1. Define a component that accepts props: Start by creating a component that expects to receive props as input. This can be either a functional component or a class component.

For functional components:



import React from 'react';

const MyComponent = (props) => {
  // Component logic using props
  return <div>{props.message}</div>;
};

For class components:


import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    // Component logic using this.props
    return <div>{this.props.message}</div>;
  }
}

2. Pass props to the component: In a parent component or the component that renders the component with props, you can pass the props by adding attributes to the JSX tag.


// Parent component or component that renders MyComponent
<MyComponent message="Hello, World!" />

3. Access props within the component: In the component receiving the props, you can access the values through the `props` object. For functional components, use `props.propName`, and for class components, use `this.props.propName`.


// Functional component
const MyComponent = (props) => {
  return <div>{props.message}</div>;
};
  


// Class component
class MyComponent extends Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}
  

In the example above, the prop `message` is passed as an attribute when rendering the `MyComponent`. Within the component, the prop value is accessed using `props.message` for functional components and `this.props.message` for class components.


Props can be used to pass any type of data, including strings, numbers, objects, arrays, or even functions, from parent components to child components. The child components can then use these props to render dynamic content or perform certain actions based on the provided data.


Remember to ensure that the prop names are consistent between the parent component and the child component to avoid any issues when accessing the props.


Other Example

Create a Menu.js


import './App.css'
function Menu(props){
    // Component logic using props
    return <div className='box'>{props.message}</div>;
};

export default Menu;

./App.css


.box{
  width: 25%;
  height: auto;
  background-color: aqua;
  border: solid 5 px black;
  border-radius: 20%;
  margin: auto;
  text-align: center;
  font-size: large;
  padding: 10px;
  margin-top: 10px;
}
  

./ App.js


import './App.css';
//@p4n.in
import Menu from './Menu';


function App() {

  let course= ['java','c++','jsp','python','go','r']
 
  let size= course.length;

  return(
    <>
         
         {[...Array(size)].map((x,i) =>
          <Menu message={course[i]} />
          )} 
      
    </>
  ); 
    
}

export default App;

output :


Related Posts

See All

React JS forms

Forms are really important in any website for login, signup, or whatever. It is easy to make a form in HTML but forms in React work a little differently. In HTML the form data is usually handled by

Introduction to Components in React

Components are the building blocks of any React app. Components allow us split the UI into independent and reusable pieces. A component is combination of 1. Template using HTML 2. User Interactivity u

Comments


bottom of page