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. — Snirka
– Snirka, Commented Jun 29, 2021 at 17:55
You can pass a component as props, but not like that. See if this helps. — sallf
– sallf, Commented Jun 29, 2021 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
– zb22, Commented Jun 29, 2021 at 17:55

Vitor Gomes · Accepted Answer · 2021-06-29 18:01:25Z

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 ...>

Collectives™ on Stack Overflow

TypeError: Cannot read property 'children' of undefined

1 Answer 1

Option 1

Option 2

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Option 1

Option 2

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related