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;

```