React - passing parent vars from parent to child components

Question

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;