Tengo este código para agregar div a la tabla al hacer clic, pero lo agregué desde Stack a un proyecto Fuse que tiene su propia plantilla. Por favor, eche un vistazo a este código, creo que hay un problema muy simple con él. Soy nuevo en React y no entiendo cómo puedo exportar la clase. Independientemente de lo que intenté, hay un error. Aquí está el código:

 const useStyles = makeStyles({ layoutRoot: {}, }); Class Mdf extends React.Component ({ getInitialState: function () { return { tablerows: [ { fname: "Tom", lname: "Moody", age: 23 } ] }; }, addRow: function () { // add new data from here var newdata = { fname: "Tom", lname: "Moody", age: 23 } //take the existing state and concat the new data and set the state again this.setState({ tablerows: this.state.tablerows.concat(newdata) }); }, rows: function () { return this.state.tablerows.map(function (row, i) { return (<tr key={i}> <td>{row.fname}</td> <td>{row.lname}</td> <td>{row.age}</td> </tr>); }); }, render: function () { const classes = useStyles(); return ( <FusePageSimple classes={{ root: classes.layoutRoot, }} header={ <div className="p-24"> <h1>Site Details</h1> </div> } contentToolbar={ <div className="px-24"> <h4>Content Toolbar22222</h4> </div> } content={ <div className="p-24"> <div> <table> <tr> <td> row 1 </td> </tr> <tr> <td> row 2 </td> </tr> <tr> <td> row 3 </td> </tr> {this.rows()} </table> <button id="addBtn" onClick={this.addRow}>ADD</button> </div> </div> } /> ); } }); // React.render(<Mdf />) export default Mdf

Y el mensaje de error que aparece es este:

 Attempted import error: './Mdf' does not contain a default export (imported as 'Mdf').