React - render prop, iterate over array does not show value

Question

I have to files, App.js and Example.js

App.js

import React from 'react'
import Example from './Example'

const App = () => {
    return (
        <div>
            <Example render={ students =>  <ul> Hi , {students.forEach( student => {return <div>{student}</div>}) } </ul>   } />
        </div>
    )
}

export default App

and Example.js

import React from 'react'

function Example(props) {
    return (
        <div>
            {props.render(["Maria", "Alice", "Gina", "Cleopatra"])}
        </div>
    )
}

export default Example

The expected result was ,,Hi Maria , Alice ..." i wanted to see the names, but for some reason, without no error, i only get ,,Hi"

Does anyone see the issue?

Many thanks

wyfy · Accepted Answer · 2020-08-19 19:29:44Z

2

I do not think you should use render props in this case. Also, the method you should use is map, because forEach does not return anything, it simply invokes function on the elements inside the array. Simply pass the students array to Example component and render them inside Example itself. Ex:

<Example  students={//studentsArray} />

then inside Example:

function Example(props) {
    return (
        <div>
            {props.students.map(student => <div>hi {student}</div>)}
        </div>
    )
}

answered Aug 19, 2020 at 19:29

wyfy

3611 gold badge3 silver badges11 bronze badges

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

2 Comments

Alexandru Daniel Pistol Over a year ago

Indeed, you where right, when i switched map with forEach, it displayed the values. Many thanks @wyfy !

Alexandru Daniel Pistol Over a year ago

My reputation is still less then 15, so my vote is not shown, but as soon as i will pass 15, i will come back and vote every answer that helped me!

Simran · Accepted Answer · 2020-08-19 19:43:30Z

0

Try using students.map() instead of forEach() function. It works fine for me:

<Example render={ students =>

Hi , {students.map( student => {return {student}}) }

} />

answered Aug 19, 2020 at 19:43

Simran

1187 bronze badges

Collectives™ on Stack Overflow

React - render prop, iterate over array does not show value

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related