Search code examples
arraysreactjsreact-functional-component

React.js Map Array style for a unique id and each button disabled

d

I need each question button when it is clicked to be disabled. I would also like to style each question button. I already looked for several answers to this problem but I found nothing. As I don't know much about React in this case, should I use useEffect or children.props? If you have any solution please let me know.

Demo

Solution

  • Your buttons' state is already available for each button, you just need to use state and disable button.

    {/* Question buttons */}
{buttons.map((button) => (
  <button key={button.id} disabled={button.clicked} onClick={() => buttonClickHandler(button.id)}>
    {button.label}
  </button>
))}

    About styling buttons individually, you can create a className for each button and style buttons depending on that:

    <button className={'button-' + button.id}>

    and now from css apply color:

    .button-01 { background: pink; }

    The second approach could be that you create styles for each button inside the state, and consume it from there.

    <button style={button.style}>