I have Few list of values and I am iterating through Map to display the Data, Now I am getting the list of Data, But here I need to open the modal when I click on First Item of the list.. So here I am iterating through Map to display the Data, Now How can I write the Click Event for First Item of the list, Can Anyone Help me in this, Thanks in Advance

const DisplayData:React.FC = () => {
    const data = inputs;
   
     const handlechange =(index:any) =>{
           const newData = {...data};
           //console.log(newData.purpose);
           newData.purpose[index].value = 'Credit Card Payment'

     }

  return (
    <div className='Data' >
        {data.purpose.map((items,index) =>{
           // console.log(items.value);
            return (<ul>
                <li key={index} onClick={() =>{handlechange(index)}} >{items.value}</li>
            </ul>
        )})}
    </div>
  )
}
export default DisplayData;

export const inputs = {
    "purpose": [
         {
            "locale": "EN",
             "code": "CRP",
             "value": "Credit Card Payment"
         },
         {
            "locale": "EN",
             "code": "SRP",
             "value": "Educational Support"
         },
         {
            "locale": "EN",
             "code": "KRP",
             "value": "Family Support (Workers uninons)"
         },
         {
            "locale": "EN",
             "code": "YRP",
             "value": "Credit Card Payment,Family Support (Workers uninons)"
         },
         {
            "locale": "EN",
             "code": "CRP",
             "value": "Family Support (Workers uninons),Credit Card Payment"
         },
         {
            "locale": "EN",
             "code": "CRP",
             "value": "Credit Card Payment1234567890asdfghjkl"
         },
         {
            "locale": "EN",
             "code": "CRP",
             "value": "Family Support (Workers uninons)1234567890sdfghjkl"
         },
         {
            "locale": "EN",
             "code": "CRP",
             "value": "Educational Supportertyh456789sdfg"
         },
    ]
}

CodePudding user response：

You need a modal component to show selected data. if the select option is only on the first item you can add conditions based on an index

     const DisplayData: React.FC = () => {
    const [selectedItem, setSelectedItem] = React.useState();

    const [openModal, setModalOpen] = useState(false);

    const data = inputs;

    const handleSelect = (selectedItem) => {
        setSelectedItem(item);
        setModalOpen(true);
    };
    const handleOnCloseModal = () => {
        setModalOpen(false);
        setSelectedItem(undefined);
    };

    return (
        <>
            <div className="Data">
                <ul>
                    {data.purpose?.map((item, index) =>
                        index === 0 ? (
                            <li key={index} onClick={() => handleSelect(item)}>
                                {item?.value}
                            </li>
                        ) : (
                            <li key={index}>{item?.value}</li>
                        )
                    )}
                </ul>
            </div>
            {/* modal component */}
            <Modal isOpen={openModal} onClose={handleOnCloseModal}>
                <div>{selectedItem?.value}</div>
            </Modal>
        </>
    );
};
export default DisplayData;

export const inputs = {
    purpose: [
        {
            locale: 'EN',
            code: 'CRP',
            value: 'Credit Card Payment',
        },
        {
            locale: 'EN',
            code: 'SRP',
            value: 'Educational Support',
        },
        {
            locale: 'EN',
            code: 'KRP',
            value: 'Family Support (Workers uninons)',
        },
        {
            locale: 'EN',
            code: 'YRP',
            value: 'Credit Card Payment,Family Support (Workers uninons)',
        },
        {
            locale: 'EN',
            code: 'CRP',
            value: 'Family Support (Workers uninons),Credit Card Payment',
        },
        {
            locale: 'EN',
            code: 'CRP',
            value: 'Credit Card Payment1234567890asdfghjkl',
        },
        {
            locale: 'EN',
            code: 'CRP',
            value: 'Family Support (Workers uninons)1234567890sdfghjkl',
        },
        {
            locale: 'EN',
            code: 'CRP',
            value: 'Educational Supportertyh456789sdfg',
        },
    ],
};