prop

by

Props

  • App is the parent component
  • AppChild is the child component called from App
  • props is to pass the data from parent to child component.
 
				
					import React from "react";

const App = () => {
  return (
    <>
      <Child id="1" name="child1" />
    </>
  );
};

const Child = (props) => {
  return (
    <div>
      <ul>
        <li>{props.id}</li>
        <li>{props.name}</li>
      </ul>
    </div>
  );
};

export default App;

Props - Destructuring

  • id and name has to be exactly the same
  • if you make this as below it wont work
    • let { id1, name1 } = props;
				
					import React from "react";

const App = () => {
  return (
    <>
      <AppChild id="1" name="child1" />
    </>
  );
};

const AppChild = (props) => {
  let { id, name } = props;
  return (
    <div>
      <ul>
        <li>{id}</li>
        <li>{name}</li>
      </ul>
    </div>
  );
};

export default App;
  • const AppChild = ({ id, name }) => 
  • Destructuring is done right inside the parantheses of child component
				
					import React from "react";

const App = () => {
  return (
    <>
      <AppChild id="1" name="anurag" />
    </>
  );
};

const AppChild = ({ id, name }) => {
  return (
    <div>
      <ul>
        <li>{id}</li>
        <li>{name}</li>
      </ul>
    </div>
  );
};
export default App;

Leave a Comment