Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

141
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!