Мне нужно сделать примерно такой эффект https://jsfiddle.net/rusline/x2bcukw7/4/ Конечно нужно еще и чтобы когда ты другую строку нажимаешь, то все открытые строки сворачивается. Только когда я начал делать на react то у меня возник ступор как все это реализовать https://codepen.io/rusline/pen/xpEzPy?editors=0010
class Product extends React.Component{
render(){
return(
<tr onClick={<RowColumn />}>
<td key={this.props.product.id}>{this.props.product.id}</td>
<td>{this.props.product.name}</td>
</tr>
)
}
}
class RowColumn extends React.Component{
render(){
return(
<div>Hello</div>
)
}
}
class GridView extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
{this.props.product.map(n => <Product product={n}/>
)}
</tbody>
</table>
)
}
}
const СATEGORY = [
{
id: 0,
name: 'Канцтовары',
createAt: '2017-12-12 10:00:00'
},
{
id: 1,
name: 'Мебель',
createAt: '2017-12-12 11:00:00'
},
{
id: 2,
name: 'Электроника',
createAt: '2017-12-15 08:30:00'
},
{
id: 3,
name: 'Бытовая техника',
createAt: '2017-12-12 10:00:00'
},
];
ReactDOM.render(
<GridView product = {СATEGORY}/>,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>