Un ejemplo:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Cabecera extends Component {
render() {
return (
<tr><th>Alumno</th><th>Nota</th></tr>
);
}
}
;
class Fila extends Component {
render() {
return (
<tr onClick={() => this.props.mas(this.props.nombre, this.props.nota)}>
<td>{this.props.nombre}</td><td>{this.props.nota}</td>
</tr>
);
}
}
;
class Tabla extends Component {
constructor(props) {
super(props);
this.state = {
alumnos: this.props.alumnos,
cont: 0
};
this.mas = this.mas.bind(this);
}
mas(nombre, nota) {
this.setState({alumnos: [...this.state.alumnos, {nombre: nombre, nota: nota}]});
}
render() {
const filas = this.state.alumnos.map((fila, index) => {
return (<Fila key={index} nombre={fila.nombre} nota={fila.nota} mas={this.mas}/>);
}
);
return (
<div>
<button onClick={() => this.mas("Ana", 6)}>Añadir</button>
<table>
<thead>
<Cabecera/></thead>
<tbody>
{filas}
</tbody>
</table>
</div>
);
}
}
;
class App extends Component
{
render() {
const alumnos = [{nombre: "Ana", nota: 6}, {nombre: "Pep", nota: 4}];
return (
<Tabla alumnos={alumnos}/>
);
}
}
;
export default App;