React JS Grid with Selectable Rows 🔥🔥 #reactjs #javascript #reactjstutorial

In React JS, a selectable grid is a component that allows users to select multiple items in a grid layout. This can be useful for building interactive interfaces where users need to select multiple items at once, such as in a shopping cart or a list of products.

To create a selectable grid in React JS, we will need to use state management to keep track of which items are selected and update the UI accordingly. We will also need to handle user interaction events to toggle the selection of items in the grid.

Here’s a step-by-step tutorial on how to create a selectable grid in React JS:

Step 1: Set up your React project
First, make sure you have Node.js and npm installed on your machine. You can create a new React project by running the following command in your terminal:

npx create-react-app selectable-grid-app

Navigate to the newly created project directory by running:

cd selectable-grid-app

Step 2: Install any necessary dependencies
For this tutorial, we will be using a popular UI library called Material-UI to create the grid layout. Install Material-UI by running:

npm install @mui/material @emotion/react @emotion/styled

Step 3: Create the SelectableGrid component
Create a new file called SelectableGrid.js in the src directory of your project. In this file, import the necessary dependencies and create a functional component called SelectableGrid. This component will render a grid of items that the user can select.

import React, { useState } from 'react';
import { Grid, Box, Typography } from '@mui/material';

const SelectableGrid = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleItemClick = (item) => {
    const isSelected = selectedItems.includes(item);
    if (isSelected) {
      setSelectedItems(selectedItems.filter((selectedItem) => selectedItem !== item));
    } else {
      setSelectedItems([...selectedItems, item]);
    }
  };

  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  return (
    <Grid container spacing={2}>
      {items.map((item) => (
        <Grid item xs={3} key={item}>
          <Box
            onClick={() => handleItemClick(item)}
            sx={{
              backgroundColor: selectedItems.includes(item) ? 'lightblue' : 'white',
              padding: 2,
              textAlign: 'center',
              cursor: 'pointer',
            }}
          >
            <Typography variant="h6">{item}</Typography>
          </Box>
        </Grid>
      ))}
    </Grid>
  );
};

export default SelectableGrid;

In this component, we are rendering a grid of items where each item is displayed as a box with its name. When a user clicks on an item, it will toggle the selection state of that item. Selected items will have a light blue background color.

Step 4: Render the SelectableGrid component
In your App.js file, import and render the SelectableGrid component:

import React from 'react';
import SelectableGrid from './SelectableGrid';

function App() {
  return (
    <div>
      <h1>Selectable Grid in React JS</h1>
      <SelectableGrid />
    </div>
  );
}

export default App;

Step 5: Start the development server
Start your React development server by running:

npm start

Open your browser and navigate to http://localhost:3000 to see your selectable grid in action.

Congratulations! You have successfully created a selectable grid in React JS using Material-UI. Feel free to customize the styling, add more functionality, or integrate this component into your own projects. Happy coding! 🔥🚀