I' m building a simply React webapp. In my App.js I have the main ponent 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>
);
}
ponentDidMount() {
fetch('')
.then(response => response.json())
.then(x => this.setState({nations: x}));
}
ponentDidUpdate() {
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.
I' m building a simply React webapp. In my App.js I have the main ponent 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>
);
}
ponentDidMount() {
fetch('https://restcountries.eu/rest/v2/all')
.then(response => response.json())
.then(x => this.setState({nations: x}));
}
ponentDidUpdate() {
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.
Share Improve this question edited Jun 30, 2021 at 10:32 Snirka 5981 gold badge5 silver badges19 bronze badges asked Jun 29, 2021 at 17:41 Saverio RandazzoSaverio Randazzo 2862 gold badges8 silver badges23 bronze badges 3-
You don't pass any props to
Mainin theAppponent. See here. – Snirka Commented Jun 29, 2021 at 17:55 - You can pass a ponent as props, but not like that. See if this helps. – sallf Commented Jun 29, 2021 at 17:55
-
props.childrenis an array, you don't useprop1.children,prop2.children... you can useprops.children[0]and etc. – zb22 Commented Jun 29, 2021 at 17:55
1 Answer
Reset to default 4So on Main.js, when you are using this kinda of syntax (functional ponent) the way you are getting the props is not correct and not only that, you can only have one children per ponent.
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 ponents/tags inside the Main ponent, 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 ...>