Mapping Over an Array onClick Button in React

Question

I'm mapping over an array to get the text for each button. I want to map over an array for each button to show text for a mapped array.

So the array for the titles of the button is:

const arr1 = ["one", "two", "three"]

And the text to show when each button is clicked is:

const arr2 = ["button one", "button two", "button three"]

So I want button with the text "one" to show the text "button one" as a p tag when clicked.

Here is what I have so far

const myComp = () => {
    const arr1 = ['one', 'two', 'three']

    const arr2 = ['button one', 'button two', 'button three']

    const mapping = () => {
        arr2.map((arr) => {
            return <p>{arr}</p>
        })
    }
    return (
        <>
            {arr1.map((data) => 
                <button onClick={mapping()}>
                    {data}
                </button>
            )}
        </>
)

CertainPerformance · Accepted Answer · 2020-05-15 19:34:30Z

With hooks, put the current button text into a <p> inside the JSX being returned, and inside the click callback, set the text to the same index in arr2:

const MyComp = () => {
    const [text, setText] = useState('');
    const arr1 = ['one', 'two', 'three']

    const arr2 = ['button one', 'button two', 'button three']

    const mapping = () => {
        arr2.map((arr) => {
            return <p>{arr}</p>
        })
    }
    return (
        <>
            {arr1.map((data, i) =>
                <button onClick={() => setText(arr2[i])}>
                    {data}
                </button>
            )}
            <p>{text}</p>
        </>
    );
};

Live snippet:

const MyComp = () => {
    const [text, setText] = React.useState('');
    const arr1 = ['one', 'two', 'three']

    const arr2 = ['button one', 'button two', 'button three']

    const mapping = () => {
        arr2.map((arr) => {
            return <p>{arr}</p>
        })
    }
    return (
        <React.Fragment>
            {arr1.map((data, i) =>
                <button onClick={() => setText(arr2[i])}>
                    {data}
                </button>
            )}
            <p>{text}</p>
        </React.Fragment>
    );
};

ReactDOM.render(
  <MyComp />,
  document.getElementById("react")
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="react"></div>

Yaqoob · Accepted Answer · 2020-05-15 19:59:22Z

1

    You can try this way as it makes a key/value pair hence would be easy to link both button and its value.

    var testArr = arr2.map(function(item,index) { 
            return {"id":arr1[index], "val":item}
        }.bind(this));

        console.log(testArr);

        Output:
        [{
           id: "one",
           val: "button one"
         }, {
              id: "two",
              val: "button two"
         }, {
              id: "three",
              val: "button three"
        }]

edited May 15, 2020 at 19:59

answered May 15, 2020 at 19:53

Yaqoob

131 silver badge6 bronze badges

Comments

Alopwer · Accepted Answer · 2020-05-15 19:37:07Z

0

You can also create an array with objects

const items = [{num : 'one', text: 'btn one'}, ...]

Then to make smth like this

const [text, setText] = useState(null)
const showText = (text) => {
  setText(text);
}
return <>
{
   items.map(obj => <button onClick={() => showText(obj.text)}>{obj.num}</button>)
}
{
  text && <span>{text}</span>
}
</>

answered May 15, 2020 at 19:37

Alopwer

6401 gold badge8 silver badges26 bronze badges

Comments

Cosmindru · Accepted Answer · 2020-05-15 20:33:34Z

Here is how you would do this by keeping the same structure that you've currently got.

import React, { useState, useEffect } from 'react';

const MyComp = () => {
  const [buttonsClicked, setButtonsClicked] = useState([]);

  const arr1 = ["one", "two", "three"];
  const arr2 = ["button one", "button two", "button three"];

  useEffect(() => {
    // Create an array with the same amount of values
    // as the arr1 variable and initiate all values
    // as false
    const initialButtonsClicked = arr1.map(() => false);

    setButtonsClicked(initialButtonsClicked);
  }, []);

  const handleClick = index => {
    // Find and set the value of the button clicked to true
    // leaving the rest as they were
    setButtonsClicked(prev =>
      prev.map((item, buttonIndex) => (buttonIndex === index ? true : item))
    );
  };

  return (
    <>
      {arr1.map((_, index) => (
        <button
          key={index}
          onClick={() =>
            handleClick(index)
          }
        >
          {buttonsClicked[index] && arr2[index]}
        </button>
      ))}
    </>
  );
};

Collectives™ on Stack Overflow

Mapping Over an Array onClick Button in React

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related