How to update a List of names when the UserClick on the name of the list he wants to update?

Question

Hello guys I m having a list of names like this:

const footers = [
 title: 'fruits',
    description: 
    [
        
        'apple',
        'banana',
        'carrot',

 
    ]
]

and then I got this:

<Grid container spacing={4} justifyContent="space-evenly">
          {footers.map((footer) => (
            <Grid item xs={6} sm={3} key={footer.title}>
              <Typography variant="h6" color="text.primary" gutterBottom>
                {footer.title}
              </Typography>
              <ul>
                {footer.description.map((item) => (
                  <li key={item}>
                    <button   variant="subtitle1" color="text.secondary"  >
                      {item}
                      </button>
                  </li>
                ))}
              </ul>
            </Grid>
          ))}
        </Grid>

The above code is displaying my List with a button for each value of my List. How can I make the user when he clicks on the button of the list that has the name Carrot for example, to switch his name to a new one like tomato

Answer 1

In this case, you have to define footers as React State and change the item when the event click is fired. Here is an example:

import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import CssBaseline from '@mui/material/CssBaseline';
import Grid from '@mui/material/Grid';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import GlobalStyles from '@mui/material/GlobalStyles';
import Container from '@mui/material/Container';
import React from 'react';

function FruitContent() {
    const [footers, setFooters] = React.useState({
        title: 'fruit',
        description: [
            'carrot',
            'tomato',
            'banana',


        ]
    });

    const onClickName = (name) => event => {
        if (name === 'tomato') {
            setFooters(prev => {
                const current = {
                    ...prev,
                    description: [...prev.description]
                };
                current.description[2] = 'apple'
            })
            return;
        }
    }
    return (
        <Grid container spacing={4} justifyContent="space-evenly">
            <Grid item xs={6} sm={3} key={footers.title}>
                <Typography variant="h6" color="text.primary" gutterBottom>
                    {footers.title}
                </Typography>
                <ul>
                    {footers.description.map((item) => (
                        <li key={item}>
                            <button variant="subtitle1" color="text.secondary" onClick={onClickName(item)} >
                                {item}
                            </button>
                        </li>
                    ))}
                </ul>
            </Grid>
        </Grid>
    );
}

export default function fruit() {
    return <FruitContent />;
}