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

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>
      );
    }
  }
}

Can you share the code for `FeatureGroup`? Does it have `prop-types`? Specifically `prop-types` that places restrictions on prop `children`? You can consider reviewing the following answer in terms of how to use prop types for prop `children`: https://stackoverflow.com/a/42122662/5059657 — Alexander Staroselsky, May 27 '20 at 15:15

Yilmaz · Answer 1 · 2021-01-04T20:47:26.947

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>

edited Jan 04 '21 at 20:47

answered Jan 01 '21 at 20:54

Yilmaz

35,338
10
157
202

score 0 · Answer 2 · answered May 27 '20 at 17:02

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

score 0 · Answer 3 · answered May 27 '20 at 18:07

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!

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

3 Answers3