ReactJS Coding Challenge – Short Version

Are you looking to impress potential employers or level up your React JS skills? Participating in coding challenges is a great way to showcase your abilities and problem-solving skills. In this tutorial, we will walk through a coding challenge involving React JS.

The challenge we will tackle involves creating a simple React JS application that displays a list of items fetched from an API. The goal is to render the list of items and allow users to filter and search for specific items.

Here are the steps to complete the coding challenge:

Step 1: Setup your React JS project
First, create a new React JS project using Create React App or your preferred method. Open your terminal, navigate to the desired directory, and run the following command:

npx create-react-app coding-challenge
cd coding-challenge

Step 2: Fetch data from an API
Next, we need to fetch data from an API to display in our application. For this tutorial, we will use the JSONPlaceholder API, which provides a set of dummy data for testing and prototyping.

In your App.js file, import useState and useEffect from React and set up a state for storing the fetched data:

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

function App() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setItems(data));
  }, []);

  return (
    <div>
      {/* Display fetched items here */}
    </div>
  );
}

export default App;

Step 3: Display the items
Now that we have fetched the data, we can display the items in our application. Update the return statement in your App.js file to map over the items array and render each item:

return (
  <div>
    {items.map(item => (
      <div key={item.id}>
        <h2>{item.title}</h2>
        <p>{item.body}</p>
      </div>
    ))}
  </div>
);

Step 4: Add filtering and search functionality
To make our application more interactive, let’s add filtering and search functionality. We will create an input field for filtering by title and body text.

First, add a state for storing the search query:

const [searchTerm, setSearchTerm] = useState('');

const handleSearch = event => {
  setSearchTerm(event.target.value);
};

Next, update the return statement in your App.js file to include an input field for searching and filter the items based on the search query:

return (
  <div>
    <input
      type="text"
      placeholder="Search..."
      value={searchTerm}
      onChange={handleSearch}
    />
    {items
      .filter(item => item.title.includes(searchTerm) || item.body.includes(searchTerm))
      .map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.body}</p>
        </div>
      ))}
  </div>
);

You have now completed the coding challenge! You have successfully created a React JS application that fetches data from an API, displays a list of items, and allows users to filter and search for specific items.

Feel free to customize and expand upon this project to further showcase your React JS skills. Good luck with your coding challenges!