React prop cannot be passed into a functional component: "objects are not valid as a React child"

Question

I'm not sure why (I'm new to React) but I'm getting a simple error when trying to render a simple component 'Intros.js'. Here is the component:

Intros.js:

import React from 'react';
import PropTypes from 'prop-types';

const Intros = (summary) => {
  return (
    <div className='intros'>
      ERROR HERE: {summary} variable can't be wrapped in curly braces; reason
      unknown
    </div>
  );
};

Intros.propTypes = {
  summary: PropTypes.string.isRequired,
};

Intros.defaultProps = {
  summary: 'Summary...',
};

export default Intros;

If I change {summary} to summary then the error does not occur, but then I'd not be able to pass props down in App.js. Below is the App.js file:

App.js:

import React, { Fragment } from 'react';
import './App.css';
import Navbar from './components/layout/Navbar';
import Intros from './components/layout/Intros';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  NavLink,
} from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <Fragment>
        <Navbar />
        <Intros />
      </Fragment>
    </Router>
  );
};

export default App;

Note that the above passes down no prop but should have a default prop anyway. Below is also the error when {summary} is used in the component:

Error occurred:
Objects are not valid as a React child (found: object with keys {summary}). If you meant to render a collection of children, use an array instead.
in div (created by Intros)
in Intros (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
in StrictMode

Why does this error occur, and how can I change Intros.js to use the summary variable as a prop? Using this.props.summary also fails.

Thanks for any help. Here is a Stackblitz demo

Nicholas Tower · Accepted Answer · 2020-10-04 20:21:40Z

1

const Intros = (summary) => {

You've named the variable summary, but this is actually the entire props object, not just the summary prop. Either call it props, and then pick a value off it:

const Intros = (props) => {
  const summary = props.summary;

Or use object destructuring to do the same thing in shorthand:

const Intros = ({ summary }) => {

answered Oct 4, 2020 at 20:21

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zrna · Accepted Answer · 2020-10-04 20:24:02Z

1

You named the props as summary.
To fix your problem, use code below.

const Intros = (props) => {
  return (
    <div className='intros'>
      ERROR HERE: {props.summary} variable can't be wrapped in curly braces; reason
      unknown
    </div>
  );
};

answered Oct 4, 2020 at 20:24

zrna

6042 gold badges9 silver badges21 bronze badges

Collectives™ on Stack Overflow

React prop cannot be passed into a functional component: "objects are not valid as a React child"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related