Как задать уникальный State одному элементу из списка?

Question

[Алексей Юдов]

Добрый день!

Изучаю react. Пока что информация дается не плохо, но вот зашел в небольшой тупик.
Есть список строк из стандартного компонента Table ( material-ui ). В каждой строке в последней ячейке таблицы есть кнопка "удалить", она скрыта. Хочу при наведении на строку (№1, например) показывать скрытую кнопку, которая находится в этой строке. Для этого, кнопку я пихнул в отдельный компонент, чтобы пробросить в него state, но пока не пойму как перебросить этот state, так как у меня появляются все кнопки, относящиеся к компоненту.

// код компонента (проброс)
<ActionsBtns visible={ this.state.showActionsBtn } />

// Компонент, который должен принять state

class ActionsBtns extends React.Component
{

	constructor ( props )
	{
		super( props );
	}

	render ()
	{

		return (
<div style={{ visibility: this.props.visible ? 'visible' : 'hidden' }} >
  <IconButton aria-label="Delete">
    <DeleteIcon />
  </IconButton>
</div>
		);

	}

}

Answer 1

[Андрей Охотников]

Это нужно реализовать средствами css через hover

Comments

[Алексей Юдов]

то есть нет смысла пропсы или стэйт пробрасывать?

[Андрей Охотников]

TCloud, конечно нет, все что можно сделать на css надо делать на css. Тем более это займет 2 строки кода

[Алексей Юдов]

Андрей Охотников, ну ок. Не то чтобы это было решением, т.к. через react хотел, но можно и так.

[Алексей Беспалов]

TCloud, через реакт наверное можно по событию наведения мыши делать функцию которая будет менять стайт который передается в пропс.

[Андрей Охотников]

Алексей Беспалов, можно, но за такое решение обычно отрывают руки)