TypeError: Cannot read property 'children' of undefined

Question

I' m building a simply React webapp. In my App.js I have the main component that accepts 3 props.(SearchCountry, SearchedCountry and Datas):

import React, { Component } from 'react';
import './App.css';
import NavBar from '../Components/NavBar';
import SideBar from '../Components/SideBar';
import CountryList from '../Components/CountryList';
import Scroll from '../Components/Scroll';
import Main from '../Components/Main';
import SearchCountry from '../Components/SearchCountry';
import SearchedCountry from '../Components/SearchedCountry';
import Datas from '../Components/Datas';

class App extends Component {

  constructor() {
    super();
    this.state = {
      nations: [],
      searchField: '',
      button: false
    }
  }

  onSearchChange = (event) => {
    this.setState({searchField: event.target.value})
  }

  onClickChange = () => {
    this.setState(prevsState => ({
      button: true
    }));
  }

  render() {

    const {nations, searchField, button} = this.state;

    const searchedNation = nations.filter(nation => {
      if(button) {
        return nation.name.toLowerCase().includes(searchField.toLowerCase())
      }
    });

    return (
      <div>
        <div>
          <NavBar/>
        </div>
          <Main>
            <SearchCountry searchChange={this.onSearchChange} clickChange={this.onClickChange}/>
            <SearchedCountry nations={searchedNation}/>
            <Datas/>
          </Main>
          <SideBar>
            <Scroll className='scroll'>
              <CountryList nations={nations}/>
            </Scroll>
          </SideBar>
      </div>
    );
  }

  componentDidMount() {
     fetch('https://restcountries.eu/rest/v2/all')
    .then(response => response.json())
    .then(x => this.setState({nations: x}));
  }

  componentDidUpdate() {
    this.state.button = false;
  }

}

export default App;

This is my Main.js file:

import React from 'react';

const Main = (prop1, prop2, prop3) => {
    return(
        <div role='main' className='dib' style={{width: 'auto'}}>
            <main>
                <div className='container' style={{margin: '10px', border: '2px solid black'}}>
                    <div>
                        {prop1.children}
                    </div>
                    <div>
                        {prop2.children}
                    </div>
                    <div>
                        {prop3.children}
                    </div>
                </div>
            </main>
        </div>
    );
}

export default Main;

And that is the Datas.js:

import React from 'react';

const Datas = () => {
    return(
        <div>
            <h3>Hello world</h3>
        </div>
    );
}

export default Datas;

I don't understand why I get this error, because the Data.js file contains something inside it and everything has been declared. Thanks in advance to anyone who gives me an answer.

You don't pass any props to `Main` in the `App` component. See [here](https://koalatea.io/how-to-pass-props-in-react/). — Snirka, Jun 29 '21 at 17:55
You can pass a component as props, but not like that. [See if this helps](https://stackoverflow.com/a/63261751/3550318). — sallf, Jun 29 '21 at 17:55
`props.children` is an array, you don't use `prop1.children`, `prop2.children` ... you can use `props.children[0]` and etc. — zb22, Jun 29 '21 at 17:55

score 4 · Accepted Answer · answered Jun 29 '21 at 18:01

So on Main.js, when you are using this kinda of syntax (functional component) the way you are getting the props is not correct and not only that, you can only have one children per component.

So first things first, you can correct this part in many different ways, you can either use destructuring or with only one parameter

const Main = (prop1, prop2, prop3) => { ... }

Option 1

const Main = ({ prop1, prop2, prop3, children }) => { ... }

Option 2

const Main = (props) => { 
  console.log(props.props1)
  console.log(props.props2)
  console.log(props.children)
  ...
}

But to your case, on the App.js all components/tags inside the Main component, they are all one children, so instead of what you are doing, you should do

// Main.js
...
<div className='container' style={{margin: '10px', border: '2px solid black'}}>
    {props.children}
    // OR if you are using destructuring
    {children}
</div>

That way you are getting everything inside <Main> ... </Main> you be rendered inside the <div className="container ...>

TypeError: Cannot read property 'children' of undefined

1 Answers1

Option 1

Option 2