Как сделать в таблице разворачивание строк с дополнительной информацией?

Question

[hollanditkzn]

Мне нужно сделать примерно такой эффект. Конечно, нужно еще и чтобы когда ты другую строку нажимаешь, то все открытые строки сворачиваются.
Только когда я начал делать на react то у меня возник ступор как все это реализовать.

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')
)

Answer 1

[ой всё]

это обычный аккордеон, поищите готовый плагин

Answer 2

[0xD34F]

Например.