Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

147
Visualizações
React Fuse Component error for default export

I have this code to add div to table onclick, but I have added it from Stack to a Fuse project which has its own template. Please have a look at this code, I think there is a very simple problem with it. I am new to React, and I don't understand, how can I export the class. Whatever I tried, there is an error on it. Here is the code:

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

And the error message which shows up is this:

Attempted import error: './Mdf' does not contain a default export (imported as 'Mdf').
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda