React Unterminated JSX contents

Question

Is anyone able to spot why this react JS code won't compile? I am missing a brace or a parenthesis somewhere, I just can't quite work out where it is.

Are there any tools available where I could copy and paste this code and it would flag exactly where in the file I am missing some syntax?

function Search() {
const [searchTerm, setSearchTerm] = useState("");

const [images, setImages] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [imagesPerPage, setImagesPerPage] = useState(10);

useEffect(() => {
  const fetchImages = async () => {
    setImages(JSONDATA);
  }

  fetchImages();
}, []);

// get current images
const indexOfLastImage = currentPage * ImagesPerPage
const indexOfFirstImage = indexOfLastImage - ImagesPerPage
const currentImages = images.slice(indexOfFirstImage, indexOfLastImage)

return (
  <Images product_serial_number={val.product_serial_number} wip_id={val.wip_id} date={val.date}>

  <div className="App">
    <input
      type="text"
      placeholder="Search for wip_id, product_serial_number or date..."
      onChange={(event) => {
        setSearchTerm(event.target.value);
      }}
    />
    {JSONDATA.filter((val)=>{
      if (searchTerm == "") {
        return val
      } else if (val.wip_id.toLowerCase().includes(searchTerm.toLowerCase())
         || val.product_serial_number.toLowerCase().includes(searchTerm.toLowerCase())
         || val.date.toLowerCase().includes(searchTerm.toLowerCase())) {
        return val
      }
    }).map((val, key) => {
      return (
        <li> {val.wip_id}, | {val.product_serial_number}, | {val.date} </li>
      );
   })}
  <div/>
);
}

Answer 1

The last three lines of your snippet should be as follows:

      </div>
    </Images>
  );
}

Basically, your closing div tag was wrong (<div/> instead of </div>). Then you were missing closing tag for </Images>.

I suggest to use Visual Studio Code and its nice functionality to collapse individual elements. Refer to the following images: