How to individually function Select Tag in .map() method in React?

December 2, 2021

    const [age, setAge] = React.useState('Assigned');

    const handleChange = (event) => {
        setAge(event.target.value);
        console.log(age)
    };


    return (
        <>
        {
            actionItemArray.map(item => (
                <tr className={styles.styledTable}>
                    <td className={styles.styledTd}>{item.TITLE}</td>
                    <td className={styles.styledTd}>{item.P_PK}</td>
                    <td className={styles.styledTd}>
                    <Select
                    value={age}
                    onChange={handleChange}
                    >
                    <MenuItem value='Assigned'>Assigned</MenuItem>
                    <MenuItem value='Processing'>Processing</MenuItem>
                    <MenuItem value='Done'>Done</MenuItem>
                    </Select>
                    </td>
                    <td className={styles.styledTd}>{getUnixTime(item.START_DATE)}</td>
                    <td className={styles.styledTd}>{getUnixTime(item.DUE_DATE)}</td>
                    <td className={styles.styledTd}>{item.owner.FIRST_NAME + item.owner.LAST_NAME}</td>
                    <td className={styles.styledTd}><a className={styles.styledATag}>상세보기</a></td>
                    <td className={styles.styledTd}><a className={styles.styledATag}>수정</a></td>
                    <td className={styles.styledTd}><a className={styles.styledATag} onClick={openDeleteModal}>삭제</a></td>
                </tr>
            ))
        }
        </>
    )
}

Hey guys. This is my code. I’m using a Material-UI Select Form tag but can’t figure out how to make this form work individually while I’m using .map() method.

After I render with this code,

enter image description here

This looks like working fine but the Selects Forms are working at the same time. Need some guidance.

>Solution :

You can pass the index of the item from the map function like this:

actionItemArray.map((item,i) => (
            <tr className={styles.styledTable}>
                <td className={styles.styledTd}>{item.TITLE}</td>
                <td className={styles.styledTd}>{item.P_PK}</td>
                <td className={styles.styledTd}>
                <Select
                value={age[i]} // to get the current age value
                onChange={(e) => handleChange(e,i)}
                >
                <MenuItem value='Assigned'>Assigned</MenuItem>
                <MenuItem value='Processing'>Processing</MenuItem>
                <MenuItem value='Done'>Done</MenuItem>
                </Select>
                </td>
                <td className={styles.styledTd}>{getUnixTime(item.START_DATE)}</td>
                <td className={styles.styledTd}>{getUnixTime(item.DUE_DATE)}</td>
                <td className={styles.styledTd}>{item.owner.FIRST_NAME + item.owner.LAST_NAME}</td>
                <td className={styles.styledTd}><a className={styles.styledATag}>상세보기</a></td>
                <td className={styles.styledTd}><a className={styles.styledATag}>수정</a></td>
                <td className={styles.styledTd}><a className={styles.styledATag} onClick={openDeleteModal}>삭제</a></td>
            </tr>

In the handleChange function you use that index to change the value of that particular item only and you need to set the initial value of age to an empty array like this:

 const [age,setAge] = React.useState([]);
 const handleChange = (event,index) => {
    setAge([...age.map((data,i) => i === index ? event.target.value:data )]);
    
};