Why isn't my child component receiving props?

Ok so I wrote a simple React app for the first time ever and I want to split it into components, so I made a Cockpit component for the input textarea and a list component for rendering the results, which are contained inside my App.js. I’m getting the following error:

TypeError: Cannot read property 'userInput' of undefined

> 17 |   value={props.state.userInput}

I don’t know what I’m doing wrong and I’m just trying to wrap my head around how components interact so I’m sorry if this is a silly question. But could you have a look and tell me what’s my mistake?
Here’s my code:


import React, { Component } from 'react';
import Cockpit from './Cockpit/Cockpit';
import './App.css';

class App extends Component {
  constructor(props) {
    this.state = {
      userInput : '',
      listItems : []
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);

  handleSubmit() {
    const itemsArr = this.state.userInput.split(',');
      listItems: itemsArr

  handleChange (event) {
      userInput: event.target.value

  render() {
    return (
      <div className="App">

export default App;


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

const cockpit = (props) => {
    return (
        <header className="App-header">
        This is a header
        <h1 className="App-title">To-Do Lists</h1>
        <p className="App-intro">
          So here should be an explanation of how this works.
          changed={() => props.handleChange()}
          placeholder="Separate items with commas"
           clicked={() => props.handleSubmit()}>
           Create List
           <ul className="Results">
               listItems = {this.state.listItems}/>

    export default cockpit;


import React from 'react';

const list = (props) => props.listItems.map(function(item){
        return <li>{item}</li>;

export default list;

Thanks so much in advance!! :pray:

It should just come in as `props.userInput* for a functional component (as you have here) or this.props.userInput if it were a class component. There is no need for the property state for a prop - it’s one or the other, either local state or a passed in prop.

Great! Solved that.
But I’m still getting:

TypeError: Cannot read property ‘map’ of undefined

3 | const list = (props) => props.listItems.map(function(item){

why is that?isn’t listItems passed as props?

This is in your Cockpit component.

<List listItems = {this.state.listItems}/>


  1. that component is a functional component so it can’t have state
  2. you have not passed in the state to the cockpit as a prop, so it can’t forward it.
  listItems={this.state.listItems} // this should be added here

Ooohhh thanks so much!!! Now I get it!! :grin::grin::grin:

1 Like