Mapping through Object Data into React Components

Question

I have found various questions regarding this error but unable to find the right solution.

Overview

I am trying to build a seriesradioInput components to be part of a RadioGroup. I build this through a radioGroup component which will pass down various properties to the inputs which it receives. When I map through the values of the object I get the following error:

Error: Objects are not valid as a React child (found: object with keys {radioInputs}). If you meant to render a collection of children, use an array instead.

Question

How am I suppose to properly map through Object data and use values to pass into a component without them returning as objects?

import React from 'react';
import RadioInput from './radioInput';

export const RadioGroup= props => {

    const courseTypes = {
        type1: {
            label: "Course A"
        },
        type2: {
            label: "Course B"
        }
    }

    const radioInputs = Object.values(courseTypes).map(data => {
        return(
            <RadioInput
            disabled={false}
            type={"radio"}
            label={data.label}
        /> 
        )
    })
    return(
       {radioInputs}
    )
}

export default RadioGroup

Moshe Sommers · Accepted Answer · 2020-09-14 14:49:24Z

3

Your returning an array of JSX Elements when react components expects one element as the return value. Simply wrapping you return in a fragment should fix this. Like so

return(
   <>{radioInputs}</>
)

Just for the record as pointed out in the comments you can return an array of JSX.Element. So the following (without the curly braces) would also work.

return(radioInputs)

edited Sep 14, 2020 at 14:49

answered Sep 14, 2020 at 14:31

Moshe Sommers

1,5068 silver badges13 bronze badges

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

3 Comments

TKoL Over a year ago

Just for the record, <> is equivalent to <React.Fragment>.

Josep Over a year ago

IMO using React.Fragment here is quite bogus, because you can also return an Array of JSX elements... and that's exactly what radioInputs is :-)

Moshe Sommers Over a year ago

@Josep Hear you. Seems the actual issue is the curly brackets is making it into an object as apposed to an array of JSX Elements. Your solution should be the better solution...

Josep · Accepted Answer · 2020-09-14 14:40:40Z

I think that you want to do this instead:

import React from 'react';
import RadioInput from './radioInput';

export const RadioGroup= props => {

    const courseTypes = {
        type1: {
            label: "Course A"
        },
        type2: {
            label: "Course B"
        }
    }

    return Object.entries(courseTypes).map(([key, data]) => (
        <RadioInput
            key={key}
            disabled={false}
            type={"radio"}
            label={data.label}
        /> 
    ))
}

export default RadioGroup

Explanation of changes:

Your code was inadvertently returning a plain JS Object. This version returns an array of JSX elements.
It uses Object.entries, instead of Object.values in order to access the key of each entry. The reason being that when you return an array, each entry must have a unique key.

Collectives™ on Stack Overflow

Mapping through Object Data into React Components

Overview

Question

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Overview

Question

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related