Having trouble with react error: 'Objects are not valid as a React child. If you meant to render a collection of children, use an array instead'

Question

I am creating a React app with a Django backend and using Redux to maintain state. I am trying to render data in a child component and I keep getting this error: Objects are not valid as a React child (found: object with keys {id, sets, reps, weight, bridge_id}). If you meant to render a collection of children, use an array instead.

What I have is a main screen RoutineScreen.js which is supposed to render child components displaying the exercises in the routine and sets, reps, weight for each.

This is what my code looks like:

function RoutineScreen() {
    // Get routine id which is passed in through program screen components
    const { id } = useParams()
    const routine_id = id

    //Extract program id from routine
    const state = {...store.getState()}
    let program_id

    // -- set routines, which we will loop through to find program id
    const routines = state.programRoutines.routines

    // -- loop through routines, find match for routine_id
    for (let i in routines) {
        if (i.id == routine_id){
            program_id = i.program
        }
    }

    const dispatch = useDispatch()

    const routineExercises = useSelector(state => state.routineExercises)
    const { error, loading, exercises } = routineExercises

    useEffect(() => {

        dispatch(listRoutineExercises(program_id, routine_id))

    }, [dispatch])

    return (
        <div className="screen-container">
            <Header/>

            <SearchBar/>

            <div className="card-container">
                {exercises.map((exercise, index) => (
                    // Render Routines
                    <Exercise key={exercise.id} routine_id={routine_id} index={index} exercise={exercise}/>
                ))}
            </div>
        </div>
    )
}

export default RoutineScreen

function Exercise({ exercise, routine_id, index }) {
    // Get routine id which was passed in through program screen components
    const { id } = useParams()
    const exercise_id = id

    const dispatch = useDispatch()

    // use spread operator to unpack elements from exerciseParameters
    const exerciseParameters = useSelector(state => state.exerciseParameters)
    const { error, loading, parameters } = exerciseParameters

    useEffect(() => {

        dispatch(listExerciseParams(routine_id, exercise_id))

    }, [dispatch])

    return (
        <div style={{ textDecoration: 'none' }}>
            <div>
                <h3>{exercise.name} </h3>
                <h4>{parameters[index].reps}</h4>
                <h4>{parameters[index].weight}</h4>
            </div>
        </div>
    )
}

export default Exercise

Here is my data:

Note: I am completely new to React and Redux so feel free to let me know if there are also any other suggestions for how I should fix my code or if I am missing any relevant information for this problem. Thanks!

I tried to access the specific elements in the object by using parameters[index].reps, expecting that it would then display that data, but instead I received the error above.

Answer 1

I think you can do something like :

return(
    <div style={{ textDecoration: 'none' }}>
        <div>
            <h3>{exercise.name} </h3>
            {parameters.map(parameter => (
                <>
                    <h4>{parameter.reps}</h4>
                    <h4>{parameter.weight}</h4>
                </>
            ))}
        </div>
    </div>
)