How to render array's specific, based on ID, element onClick of a button-CodePudding

I got a following issue. This is my array:

const countries = [
  {
    id: 1,
    props:
    {
      url: '/images/polska.jpg',
      title: 'Polska',
      width: width,
      content: "Text nr 1"
    }
  },
  {
    id: 2,
    props:
    {
      url: '/images/francja.jpg',
      title: 'Francja',
      width: width,
      content: "Text nr 2"
    }
  },
  {
    id: 3,
    props:
    {
      url: '/images/slovakia.jpg',
      title: 'Slovakia',
      width: width,
      content: "Text nr 3"
    }
  }
]

And those buttons:

const Buttons = () => {
  return (
    <div>
      {countries.map((country) => (
        <Button key={country.id} />
      ))}
    </div>
  )
}

What needs to happen is onClick, under the button, one content would be shown, where array element ID = button id (key). The code beneath is hardcoded to show always the content of the first element and I can't figure how to pass the ID so that it works properly.

const Button = () => {
  const [showContent, setShowContent] = useState(false)
  const content = countries[0].props.content

  console.log(content)

  return (
    <div>
      <div className='button'>
        <button onClick={() => { setShowContent(!showContent) }}>show</button>
      </div>
      <div>
        {showContent ? content : null}
      </div>
    </div>
  )
}

export default Button

CodePudding user response：

You were close, you just weren't correctly passing the data into Button.

All you needed to do was pass the content for each button (each element in countries) into the Button component in your map in Buttons.

Before, you were simply accessing the array that you had stored, see below for how you should've done it.

const Button = ({ content }) => {
    const [showContent, setShowContent] = useState(false);

    return (
        <div>
            <div className="button">
                <button
                    onClick={() => {
                        setShowContent(!showContent);
                    }}
                >
                    show
                </button>
            </div>
            <div>{showContent ? content : null}</div>
        </div>
    );
};
const Buttons = () => {
    return (
        <div>
            {countries.map((country) => (
                <Button key={country.id} content={country.props.content} />
            ))}
        </div>
    );
};

CodePudding user response：

You should mep method.

const {
  useEffect,
  useState
} = React;

const width = 100;
const countries = [{
    id: 1,
    props: {
      url: '/images/polska.jpg',
      title: 'Polska',
      width: width,
      content: "Text nr 1"
    }
  },
  {
    id: 2,
    props: {
      url: '/images/francja.jpg',
      title: 'Francja',
      width: width,
      content: "Text nr 2"
    }
  },
  {
    id: 3,
    props: {
      url: '/images/slovakia.jpg',
      title: 'Slovakia',
      width: width,
      content: "Text nr 3"
    }
  }
]
const Button = () => {
  const [content, setContent] = useState()

  const handleClick = (id) => {
    const country = countries.find(x => x.id === id);
    setContent(country.props.content)
  }
  return (
  <div>
    {
      countries.map((country) => ( 
      <button onClick = {() =>handleClick(country.id)}> {`show content, id : ${country.id}`}</button>
      ))}
     <div> {content} </div>
    </div>
  )
}

function App() {
  return ( 
    <div className = "App">
      <Button/>
    </div>
  );
}

ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>