I want to pass data from a parent component (state) to a child component

Question

Hi i am new to React and want to pass data from a parent component to a child component. I want to display finalItems in my child component Items. However, it can not find `finalItems``` in the child component. I think it may be that I need to use props? Is this correct?

Any help would be greatly appreciated

This is the code for the parent component

import React from 'react';
import ScrollMenu from 'react-horizontal-scrolling-menu';
import './horizontalscroll.css';
import Items from './items';

// list of items




// One item component
// selected prop will be passed
const MenuItem = ({ text, selected }) => {
  return (
    <div
      className="menu-item"
    >
      {text}
    </div>
  );
};




// All items component
// Important! add unique key
export const Menu = (list) => list.map(el => {
  const { name } = el;

  return (
    <MenuItem
      text={name}
      key={name}

    />
  );
});


const Arrow = ({ text, className }) => {
  return (
    <div
      className={className}
    >{text}</div>
  );
};


const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });

class HorizantScroller extends React.Component {

  state = {
    selected: 'Brands',
    statelist: [
  {name: "Brands",
    items: ["1", "2", "3"]
  },
  {name: "Films",
    items: ["f1", "f2", "f3"]
  },
  {name: "Holiday Destination",
    items: ["f1", "f2", "f3"]
  }
]

  };



  onSelect = key => {
    this.setState({ selected: key });

    const myList = this.state.statelist;
    const myItemDetails = myList.filter(items=>items.name === key);
    const finalItems = myItemDetails.map(items => items);
    x




  }


  render() {
    const { selected } = this.state;
    // Create menu from items
    const menu = Menu(this.state.statelist, selected);
    const {statelist} = this.state;


    return (
      <div className="HorizantScroller">
        <ScrollMenu
          data={menu}
          arrowLeft={ArrowLeft}
          arrowRight={ArrowRight}
          selected={selected}
          onSelect={this.onSelect}
        />
      <div>

      </div>
      <Items onSelect={this.onSelect}/>

      </div>

    );
  }
}

export default HorizantScroller;

This is the code for the child component

import React, { Component } from "react";




class Items extends React.Component{



render() {
  return (
      <div >
      {finalItems}
      </div>

  );
}
}




export default Items;

Answer 1

Correct. Pass it to the component as a prop like this:

<Items finalItems={finalItems} onSelect={this.onSelect}/>

Then use it in the child through props like this:

<div>
  {this.props.finalItems}
</div>

Also : I don't see finalItems declared outside of the onSelect method This may be an mistake. Otherwise this will break for a different reason of finalItems not being defined. You should probably move the last three lines of the onSelect function into the body of render .

Answer 2

Yes you are right, you will need to use props in this example. You would use it like so..

<Items finalitems={this.state.finalItems} onSelect={this.onSelect}></Items> 

that is if your variable finalItems is held in state, otherwise just put the variable in between the brackets.

Then in Items you can get these items like this.

render() {
  return (
      <div >
      {this.props.finalitems}
      </div>

  );
}
}