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

CodePudding user response：

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 />;
}