React JS : Parsing error: Unexpected token, expected ";"

Question

I am new to ReactJS. This is my first React Program. Actually, it's a dynamic page, I am working it with API that's working fine but I want to search in dynamically. I have tried with some tutorials but it shows some errors. Kindly fix the issue. My code is given below:

import React, {useState,useEffect} from 'react'; 
import './App.css'; 

function About() {

    state ={
      search : ""
    }

    useEffect(() => {
      fetchItems();
    }, []);

    const [set, setItems] = useState([]);

    const fetchItems = async () => {
    const data = await fetch(
      'http://www.ongccreditsociety.com/api/circular.php'
      );

    const set = await data.json();
    console.log(set); 
    setItems(set);
    };

    onchange = e => {
      this.setState({ search : e.target.value});
    }

    render(){ 
      const {search} = this.state;
      const filter =  set.filter( country =>{
        return country.Description.toLowercase().indexOf(search.toLowercase() ) != -1
      })

    return ( 
      <div className="items">
        <div className="col">
          <input label="search" icon="search" onChange={this.onchange} /> 
        </div>
        {filter.map(item => (
          <p>{item.Description}</p> 
        ))} 
      </div>  
    );
  }
}

export default About;

Error is :

      Failed to compile
      ./src/about.js
      Line 30:  Parsing error: Unexpected token, expected ";"

      28 |       }
      29 | 
      30 |       render(){ 
         |               ^
      31 |         const {search} = this.state;
      32 |         const filter =  set.filter( country =>{
      33 |           return country.Description.toLowercase().indexOf(search.toLowercase() ) != -1
    This error occurred during the build time and cannot be dismissed.

Answer 1

Your react component is a function component. You don't need the render method inside the function component. That function itself is the render function.

This will work

import React, { useState, useEffect } from "react";
import "./App.css";

function About() {
  useEffect(() => {
    fetchItems();
  }, []);

  const [set, setItems] = useState([]);
  const [search, setSearch] = useState("");

  const fetchItems = async () => {
    const data = await fetch(
      "http://www.ongccreditsociety.com/api/circular.php"
    );

    const set = await data.json();
    console.log(set);
    setItems(set);
  };

  const onchange = e => {
    setSearch(e.target.value);
  };

  const filter = set.filter(country => {
    return (
      country.Description.toLowercase().indexOf(search.toLowercase()) != -1
    );
  });

  return (
    <div className="items">
      <div className="col">
        <input label="search" icon="search" onChange={onchange} />
      </div>
      {filter.map(item => (
        <p>{item.Description}</p>
      ))}
    </div>
  );
}

export default About;

Answer 2

Many issue's in your code,

1. You have combined class component and functional component.
2. set is a reserved word, don't use variable with name set .
3. toLowercase() is a typo, it should be toLowerCase() .
4. We don't have access to this in functional component.
5. Your search input should be controlled .

So you final code should look like this,

import React, {useState,useEffect} from 'react'; 

const About = () => {
    const [item, setItems] = useState([]);
    const [search, setSearch] = useState("");

    useEffect(() => {
      fetchItems();
    }, []);

    const fetchItems = async () => {
      const data = await fetch('http://www.ongccreditsociety.com/api/circular.php');
      const dataSet = await data.json();
      setItems(dataSet);
    };

    onchange = e => {
      setSearch(e.target.value);
    }

    return ( 
      <div className="items">
        <div className="col">
          <input label="search" icon="search" onChange={onchange} value={search}/> 
        </div>
        {search !=="" ? 
          item.filter(item => item.Description.toLowerCase().includes(search.toLowerCase())).map(item => ( <p key={item.SNo}>{item.Description}</p>)) 
          :
          item.map(item => (<p key={item.SNo}>{item.Description}</p>))
        } 
      </div>  
    );
}

export default About;

Demo