I have a container that receives data from the database and forms a table that then renders. This is how it looks like:

let tableData = '' if (this.state.agents) { tableData = this.state.agents.map(agent => ( <tr key={agent.id}> <td> <UserAvatar size='26' url={agent.avatar} /> </td> <td> {agent.lastName + ' ' + agent.name + ' ' + agent.middleName} <br /> <span className='OnlineRowCounter'>Последняя активность: 1</span> </td> <td>{agent.role}</td> <td>1</td> <td>1</td> <td>{agent.phone}</td> <td>{agent.manager}</td> <td> <div className='OptionsButton-Container'> <IconicButton type='options' clicked icon='list-ul' /> {/* //Вот этот элемент это выпадающее меню! */} <OptionsMenu options={tableRowOptions}/> </div> </td> </tr> )) }

In this example, I commented on the part of the code where I want to insert the OptionsMenu component above. This component is a drop-down menu with options for each of the rows in the table. It is the same for all rows of the table, with the same options that are passed, the only thing is that for each row there will be its own id parameters in the passed function references. The question is how to make this component rendering when clicking on the button to show options in each of the rows of the table in the place where I already dropped and inserted this component using an example.

Simply, if we leave everything as it is now, but for example, manually hide the component, it turns out that it will be rendered as an element for each row in the table, and I don’t see the point, because I repeat, the task is to render the right place me a component. What is the logic of implementation?

    0