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>
))}
</>
)
}