CODEWITHSUNDEEP
reactjsreact-hooks
delv123
delv123

Reputation: 146

map on react returns empty div

i'm using map to loop trough an array and then fill a div with it, but it's always empty:

Here's some of my code:

const [scoreOptions, setScoreOptions] = useState(initialScoreOption);
const initialScoreOption = [
        { id: 1, selected: false, icon: 'far fa-smile', label: 'lala'},
        { id: 2, selected: false, icon: 'far fa-meh', label: 'lalala'},
        { id: 3, selected: false, icon: 'far fa-frown', label: 'lalala'}
    ];
let iconosTexto;
if (scoreOptions){
    iconosTexto = scoreOptions.map(icono => {
        return(
            <div className="contenedorIconoTexto">
                <div className="iconoElemento">
                    <i className={blue ? `blueIcon ${icono.icon}` : `greyIcon ${icono.icon}`}>
                    </i>
                </div>
                <div className="iconoTexto">
                    {icono.label}
                </div>
            </div>
        )       
    });
}

and then i have this on the render

<div className="container">
    { iconosTexto }
</div>

The div with the class container it's empty when it should be filled with all of the above Can anyone help me with this?

Upvotes: 0

Views: 778

Answers (3)

Hamza El Aoutar
Hamza El Aoutar

Reputation: 5657

You need to declare initialScoreOption before passing it to useState:

const initialScoreOption = [
    { id: 1, selected: false, icon: 'far fa-smile', label: 'lala'},
    { id: 2, selected: false, icon: 'far fa-meh', label: 'lalala'},
    { id: 3, selected: false, icon: 'far fa-frown', label: 'lalala'}
];
const [scoreOptions, setScoreOptions] = useState(initialScoreOption);

demo

Upvotes: 1

Diyorbek Sadullaev
Diyorbek Sadullaev

Reputation: 477

Firstly, declare initialScoreOption before useState(initialScoreOption).

Use set key prop while rendering elements in map:

iconosTexto = scoreOptions.map((icono) => {
  return (
    <div key={icono.id} className="contenedorIconoTexto">
     ...

Then make sure that iconosTexto has always value.

Upvotes: 2

CevaComic
CevaComic

Reputation: 2104

Try this way :

const IconosTexto = () => scoreOptions.map(icono => {
    return (
        <div className="contenedorIconoTexto">
            <div className="iconoElemento">
                <i className={blue ? `blueIcon ${icono.icon}` : `greyIcon ${icono.icon}`}
                    >
                </i>
            </div>
            <div className="iconoTexto">{icono.label}</div>
        </div>
    )
}

render (
    <div className="container">
        <IconosTexto />
    </div>
)

Upvotes: 1

Related Questions