Getting a " Parsing error: Unexpected token, expected ";" " while making a react application in the following code

Question

So I am trying to make a basic react application so, in my app.js file it is throwing an error for my render function I am not able to get why. Also please pardon if the error is due to something silly but I am a real beginner to js and could really use the help. I've been following a youtube tutorial. The counters list shown here was initially a part of the counters component but to use this component in another non child component I had to lift this up to the app component, so I did some copy-pasting and the website started throwing this error.

Here's the code:

function App() {
state = {
  counters: [{
      id: 1,
      value: 4
    },
    {
      id: 2,
      value: 0
    },
    {
      id: 3,
      value: 0
    },
    {
      id: 4,
      value: 0
    },
  ],
};


handleIncrement = (counter) => {
  const counters = [...this.state.counters];
  const index = counters.indexOf(counter);
  counters[index] = {
    ...counter
  };
  counters[index].value++;
  console.log(this.state.counters[index]);
  this.setState({
    counters
  });
}

handleReset = () => {
  const counters = this.state.counters.map((c) => {
    c.value = 0;
    return c;
  });
  this.setState({
    counters
  });
}

handleDelete = (counterId) => {
  const counters = this.state.counters.filter((c) => c.id !== counterId);
  this.setState({
    counters
  });
}





render() {
  return ( 
     <div >
    <React.Fragment >
    <Navbar/>
    <main className = "container" >
    <Counters 
    counters = {
      this.state.counters
    }
    onReset = {
      this.handleReset
    }
    onIncrement = {
      this.handleIncrement
    }
    onDelete = {
      this.handleDelete
    }
    />   
    </main > 
    </React.Fragment >
    </div>
  );
}
}

this is giving the following error message:

/src/App.js
  Line 61:12:  Parsing error: Unexpected token, expected ";"



         render() {
                  ^
      return ( <
        React.Fragment >
       <

Answer 1

That's because you combined two react components paradigm together. we don't have render function in Functional Component and you need to change your code either this way to use Class Component:

class App extends React.Component {
  state = {
    counters: [
      {
        id: 1,
        value: 4
      },
      {
        id: 2,
        value: 0
      },
      {
        id: 3,
        value: 0
      },
      {
        id: 4,
        value: 0
      }
    ]
  };

  handleIncrement = counter => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = {
      ...counter
    };
    counters[index].value++;
    console.log(this.state.counters[index]);
    this.setState({
      counters
    });
  };

  handleReset = () => {
    const counters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState({
      counters
    });
  };

  handleDelete = counterId => {
    const counters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({
      counters
    });
  };

  render() {
    return (
      <div>
        <React.Fragment>
          <Navbar />
          <main className="container">
            <Counters
              counters={this.state.counters}
              onReset={this.handleReset}
              onIncrement={this.handleIncrement}
              onDelete={this.handleDelete}
            />
          </main>
        </React.Fragment>
      </div>
    );
  }
}

or this way to use Functional Component

function App() {
  const [state, setState] = React.useState({
    counters: [
      {
        id: 1,
        value: 4
      },
      {
        id: 2,
        value: 0
      },
      {
        id: 3,
        value: 0
      },
      {
        id: 4,
        value: 0
      }
    ]
  });

  const handleIncrement = counter => {
    const counters = [...state.counters];
    const index = counters.indexOf(counter);
    counters[index] = {
      ...counter
    };
    counters[index].value++;
    console.log(state.counters[index]);
    setState({
      counters
    });
  };

  const handleReset = () => {
    const counters = state.counters.map(c => {
      c.value = 0;
      return c;
    });
    setState({
      counters
    });
  };

  const handleDelete = counterId => {
    const counters = state.counters.filter(c => c.id !== counterId);
    setState({
      counters
    });
  };

  return (
    <div>
      <React.Fragment>
        <Navbar />
        <main className="container">
          <Counters
            counters={state.counters}
            onReset={handleReset}
            onIncrement={handleIncrement}
            onDelete={handleDelete}
          />
        </main>
      </React.Fragment>
    </div>
  );
}

Answer 2

You have a render() method inside a function component. You've kind o mixed class-based component with function-based component. Just return the value you want, remove the render method (put the code that is inside, outside it) and turn the rest of the functions into constants:

function App() {
  state = {
    counters: [
      {
        id: 1,
        value: 4
      },
      {
        id: 2,
        value: 0
      },
      {
        id: 3,
        value: 0
      },
      {
        id: 4,
        value: 0
      }
    ]
  };

  const handleIncrement = counter => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = {
      ...counter
    };
    counters[index].value++;
    console.log(this.state.counters[index]);
    this.setState({
      counters
    });
  };

  const handleReset = () => {
    const counters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState({
      counters
    });
  };

  const handleDelete = counterId => {
    const counters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({
      counters
    });
  };

  return (
    <div>
      <React.Fragment>
        <Navbar />
        <main className="container">
          <Counters
            counters={this.state.counters}
            onReset={this.handleReset}
            onIncrement={this.handleIncrement}
            onDelete={this.handleDelete}
          />
        </main>
      </React.Fragment>
    </div>
  );
}