Javascript syntax in ReactJS

Question

I have a ReactJS render function where I iterate over an array to display the contents like this:

render() {
    let object = eval('('+this.props.objectData+')');
    let cd = object.objColAliases;
    return (
        <div>
            {
                cd.map(o=>{
                    return <p>{o}</p>
                })
            }
        </div>
    );
}

This code is working but at the console I have an warning:

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

, the warning makes sense, map is used to iterate over Maps not over simple arrays.

So I try to iterate like a normal array, like this:

render() {
    let object = eval('('+this.props.objectData+')');
    let cd = object.objColAliases;
    return (
        <div>
            {
                for (let i = 0; i < cd.length; i++) {
                    return <p>{o}</p>
                }
            }
        </div>
    );
}

But now I have a syntax error on the line with "for (let i = 0; i < cd.length; i++)". How do I write the correct code in this context?

This is a sandbox with the problem.

`map` _is_ used to iterate over simple arrays. The interpolated JS in JSX **must** be an expression. Why not just add the key prop? — jonrsharpe, Nov 24 '22 at 13:03
To get rid of the warning, You can change your code like `{cd.map((o, index)=>{ return
{o}
})}` . Make note `index` . Forked sandbox https://codesandbox.io/s/for-in-render-forked-t57him — Maniraj Murugan, Nov 24 '22 at 13:03
I'm a little concerned about `eval('('+this.props.objectData+')');`. What is it mean to do? — Andy, Nov 24 '22 at 13:03
this.props.objectData is a JSON string and I transform to a object using eval, is not fine like this? — Victorqedu, Nov 24 '22 at 13:11

tpstlk · Answer 1 · 2022-11-24T13:40:16.710

1

You should add a key prop to the parent tag in the map if it's unique:

<div>{cd.map((o) => <p key={o}>{o}</p>)}</div>

If it's not unique, you can use index as a key when mapping:

<div>{cd.map((o, index) => <p key={index}>{o}</p>)}</div>

But, read the documentation first, because using the index as a key is not recommended: https://reactjs.org/docs/lists-and-keys.html

edited Nov 24 '22 at 13:40

answered Nov 24 '22 at 13:17

tpstlk

21
3

score 0 · Accepted Answer · answered Nov 24 '22 at 13:04

You need to provide a unique key tag to elements returned inside the .map, s

render() {
    let object = eval('('+this.props.objectData+')');
    let cd = object.objColAliases;
    return (
        <div>
            {
                cd.map(o=>{
                    return <p key={o.id}>{o}</p>
                })
            }
        </div>
    );
}

If o does not have a unique property, you can also use the index, like so

render() {
    let object = eval('('+this.props.objectData+')');
    let cd = object.objColAliases;
    return (
        <div>
            {
                cd.map((o, index) =>{
                    return <p key={index}>{o}</p>
                })
            }
        </div>
    );
}

Javascript syntax in ReactJS

2 Answers2