CODEWITHSUNDEEP
javascriptarraysreactjs
Nelson Silva
Nelson Silva

Reputation: 439

Map different arrays into same component

Using react, I need to pass by props data to a component, the only problem is that this data comes from two different arrays.

How can I pass it by creating only one component?

If I do this, mapping both arrays, I get two components and it has to be only one:

const Field2 = (props) => {

    return (

        <div className={"field2"}>

            {props.thumbnails.map(a =>
                <Field2Content label={a.label}
                />
            )}

            {props.texturasEscolhidas.map(b =>
                <Field2Content name={b.name}
                />
            )}

        </div>
    )
};

export default Field2;

If I do:

    {props.thumbnails.map(a =>
        <Field2Content label={a.label}
                       name={'hello'}
        />
    )}

I get this:

enter image description here

The 'hello' is what I need to get from the texturasEscolhidas array.

"Color of leg" and "Colour" are created when the component is renderer, the Hello should only appear when a button is clicked, and it's dynamic, changing by which of button is pressed.

Upvotes: 0

Views: 96

Answers (1)

Ionică Bizău
Ionică Bizău

Reputation: 113355

To use just one component, assuming the both arrays have the same length, you can get the label and the name by iterating one array and accessing the element of the other array by index (the second parameter in the callback of the map):

const Field2 = (props) => {
    return (
        <div className={"field2"}>
            {props.thumbnails.map((a, index) =>
                <Field2Content
                   label={a.label}
                   name={(props.texturasEscolhidas[index] || {}).name}
                />
            )}
        </div>
    )
};

Upvotes: 3

Related Questions