React - passing parent vars from parent to child components

0 votes
32 views
added Mar 15 in React by lcjr First Warrant Officer (11,830 points)

To pass the area and listingType variables from the parent component to the child component in React, you can simply pass them as props when rendering the child component. Here's an example of how you can do it:

Parent Component (ParentComponent.js):

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  // Assuming you have these variables defined in the parent component
  const area = 'New York';
  let listingType = 'houses';

  return (
    <div>
      <ChildComponent area={area} listingType={listingType} />
    </div>
  );
};

export default ParentComponent;

 

Child Component (ChildComponent.js):

import React from 'react';

const ChildComponent = ({ area, listingType }) => {
  return (
    <div>
      <p>Area: {area}</p>
      <p>Listing Type: {listingType}</p>
    </div>
  );
};

export default ChildComponent;

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...