React.Children.only expected to receive a single React element child. But only single children in files?

Question

All my other pages work fine. And this happened after I made an addition to App.js, which I subsequently removed. Obviously I must have made some other change, I'm not able to find it however.

Error: React.Children.only expected to receive a single React element child.
▶ 18 stack frames were collapsed.

(anonymous function)

src/components/Feed.js:16
  13 | .then(res => res.json())
  14 | .then((data) => {
  15 | 
> 16 |   this.setState({ events: data })
     | ^  17 | 
  18 | })
  19 | .catch(console.log)

Looking at Feed.js I've not modified anything here.

import React, {Component} from "react";
import Header from "./Header"
import Events from "./Events"

class Feed extends Component {

  state = {
  events: []
}

componentDidMount() {
  fetch('http://127.0.0.1:5002/events')
  .then(res => res.json())
  .then((data) => {

    this.setState({ events: data })

  })
  .catch(console.log)
}



render() {
  return (
    <div className="feed">
    <Header />
      <div class="container">

          <Events events={this.state.events} />

      </div>
    </div>
  );
}
}
export default Feed;

And the only other component it calls is as below:

import React from 'react';
import Accordion from 'react-bootstrap/Accordion'
import Card from 'react-bootstrap/Card'
import Alert from 'react-bootstrap/Alert'
import Button from 'react-bootstrap/Button'
import './App.css'


function Events ({events}){


  return (
    <div>
      <center><h1>Event List</h1></center>
      {events.map((event) => (
        <div class="mt-2">

        <Accordion defaultActiveKey="0" className="rounded ">
          <Card className="rounded">
            <Accordion.Toggle as={Alert} variant="secondary" eventKey={event.id} className="accordion-title border-0"><span className="badge badge-secondary">{event.date}</span><span> </span><span>{event.title}</span>
            </Accordion.Toggle>
            <Accordion.Collapse eventKey={event.id} className="accordion-collapse">
            <Button href="detail" variant="secondary" size="lg" disabled>Link</Button>
              <Card.Body className="rounded">{event.summary}</Card.Body>
            </Accordion.Collapse>
          </Card>
        </Accordion>

        </div>
      ))}

    </div>
  )

}
export default Events;

As I said I've not modified anything in these two files and I've made sure to remove any changes to other files.

Answer 1

I did make a change which caused the issue.

In Events.js I added a new button to the accordion. On removing this everything worked fine.

The offending entry <Button href="detail" variant="secondary" size="lg" disabled>Link</Button>

The Button should have been inside the Card.Body.

        <Accordion defaultActiveKey="0" className="rounded ">
          <Card className="rounded">
            <Accordion.Toggle as={Alert} variant="secondary" eventKey={event.id} className="accordion-title border-0"><span className="badge badge-secondary">{event.date}</span><span> </span><span>{event.title}</span>
            </Accordion.Toggle>
            <Accordion.Collapse eventKey={event.id} className="accordion-collapse">

              <Card.Body className="rounded">{event.summary}
                <Button href="detail" variant="secondary" size="lg" disabled>Link</Button>
              </Card.Body>
            </Accordion.Collapse>
          </Card>
        </Accordion>```