Как добавить логику для атрибута в React?

Question

[TheSnegok]

Доброго времени суток!
Есть цикл мап который перебирает массив и создаёт из него инпуты и нужно чтобы при создании только у первого инпута был атрибут checked:

{dots.map((item, index) => <input checked type='radio' name="dot" key={index} className={s.Dot} />)}

Answer 1

[wonderingpeanut]

У тебя есть индекс, нужно инпуту с индексом 0 сделать checked={true}. Простым движением руки делаем проверку, равняется ли текущий индекс 0, и присваиваем получившееся значение свойству checked инпута.

...
<input checked={index === 0} {...props} />
...

Comments

[TheSnegok]

Да, я уже так делал, но вот в чём подвох, потом когда я хочу выбрать другой input то оно не меняется)

[wonderingpeanut]

TheSnegok, нужно уточнять это в вопросе. В таком случае нужон стейт, который будет хранить текущий выбранный элемент:

const [checked, setChecked] = useState(0);
...
<input checked={index === checked} onClick={() => setChecked(index)} {...props} />

[TheSnegok]

wonderingpeanut, Благодарю, я думал можно как-то задавать логику для атрибутов чтобы если индекс 0 то вставить checked, спасибо за интересное решение)