React.Children.only expected to receive a single React element child Stuck - reactjs

Question

Get an error Error: React.Children.only expected to receive a single React element child.
Really stuck, Anybody help?
componentDidMount() {
axios.get(this.props.url).then((res) => {
const data = res.data._embedded.districts;
this.setState({ data });
console.log(this.state.data);
});
}
render() {
console.log("render");
if (this.props.terr === "districts") {
return (
<FeatureGroup>
{this.state.data.map((data) => {
return (
<GeoJSON
key={data.name}
data={data.geometry}
style={this.myStyle}
>
<Popup>{data.name}</Popup>
</GeoJSON>
);
})}
</FeatureGroup>
);
}
}
}

Answer 1

I got same error. In my case there was an empty space inside component with tag. Empty space {""} inside was considered another component and since <Link
accepts only one component I got that error.
<Link href="/"> {" "} // I removed empty space
<a className="navbar-brand">GitTix</a>
</Link>

Answer 2

Without seeing all the code it is hard to tell. I have a tingling that your this.state.data is null or empty in your constructor and the first time you are trying to render your map function isn't returning any data. componentDidMount will run after it has already been rendered.
try checking to see if there is data in your data first.
{this.state.data.length && <FeatureGroup>
{this.state.data.map((data) => {
return (
<GeoJSON
key={data.name}
data={data.geometry}
style={this.myStyle}
>
<Popup>{data.name}</Popup>
</GeoJSON>
);
})}
</FeatureGroup>}

Answer 3

As the error describes, FeatureGroup is expecting a single element as a child. Currently you have one to many elements given the Array.prototype.map you are using to process an array and generate elements. Likely this is coming from prop-types on FeatureGroup that specify how many children are allowed. This is not uncommon, elements like Provider from react-redux expect a single child. At minimum wrap the output of the Array.prototype.map with an element:
<FeatureGroup>
<div>
{this.state.data.map((data) => {
return (
<GeoJSON
key={data.name}
data={data.geometry}
style={this.myStyle}
>
<Popup>{data.name}</Popup>
</GeoJSON>
);
})}
</div>
</FeatureGroup>
Or you can use React.Fragment:
<FeatureGroup>
<React.Fragment>
{this.state.data.map((data) => {
return (
<GeoJSON
key={data.name}
data={data.geometry}
style={this.myStyle}
>
<Popup>{data.name}</Popup>
</GeoJSON>
);
})}
</React.Fragment>
</FeatureGroup>
Hopefully that helps!