Question

173

TypeError: Cannot read property 'children' of undefined

rated 0 times [ 174] [ 1] / answers: 1 / hits: 16972 / 3 Years ago, tue, june 29, 2021, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

victorw

Add To Favorites

Follow

Total Points: 484

Total Questions: 120

Total Answers: 107

Location: Faroe Islands

Member since Thu, Apr 8, 2021

3 Years ago

answered 3 Years ago tayaw · Accepted Answer

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