Inserir array dinâmico em outro array conforme selecionar os items

Front-end
, ,
#1

Estou conseguindo adicionar um array em outro array para que eu possa enviar para outro componente, porém toda vez que eu clico em um item (que no caso é um botão) ele permite adicionar o mesmo valor.

Gostaria de saber como eu faço para desabilitar um botão assim que o valor é passado para o array, e reabilita-lo assim que eu clicar de volta.

A ideia é que o usuário consiga escolher vários “valores” diferentes a cada clique que der em algum desses itens.

Quem puder me ajudar ficarei grata!

Meu código está assim

import React, { useState } from 'react'

export default function Valores({ value }) {

  const [recheio, setRecheio] = useState([
    "Value1", "Value2", "Value3", "Value4",
  ])

  const [select, setSelect] = useState([])

  const selected = (value) => {
    alert(value)
    setSelect([value])
  }

  return (
    <>
      {recheio.map((value, index) => (
        <div key={index}>
          <button name={value}
            id={index} onClick={() => selected([select + value])}>
            {value}
          </button>
        </div>
      ))}
    </>
  )
}
#2

Primeiramente, parabens pela sua primeira postagem!

Ok vamos la! Vou te dar a resposta e ja deixar algumas dicas que eu observei que pode melhorar no seu codigo

Boa sorte!

1 curtida
#3

Nossa, muito obrigada pelas dicas, estou fazendo esse sistema mais para estudar coisas novas junto com o React, você me ajudou MUITO! <3

1 curtida