Przypisanie do odpowiedniej nazwy konkretnego opisu ( polaczenie id)

Witam, chyba jestem za głupi na rozwiazanie tego problemu... mianowicie

mam kilka nazw gdzie po kliknieciu w ta nazwe pobieram jego id
mam tez formularz do ktorego wpisuje Opis, oraz IdOpis tego opisu.
i chce zrobić cos takiego, ze jak klikne np nazwa1 o id 1
to w jakims popupie wyswietli mi się w nim opis o IdOpis 1. Napisałem cos sam głowiłem sie nad tym ze 3h ale nie potrafie jednak sobie z tym poradzic. Proszę o doswiadczonych programistów o pomoc..

state = {
 
 nazwy:[{name:nazwa1,id:1},{name:nazwa2,id:2},{name:nazwa3,id:3}],
opisy:[{opis:opis1,IdOpis:1},{opis:opis2,IdOpis:2},{opis:opis3,IdOpis:3}]
 
}
  myIp = (id) => {
        const calosc = []
        for (const opis of this.state.opisy.IdOpis) {
            if (id === opis.id) {
                calosc.push({
                 ...
                });
            }
        }
 
  
       {this.state.nazwy.map((nazwa,id) => {
                 return <>
    <p onClick={() => this.myIp(nazwa.Id)}>{`Nazwa nr ${nazwa.Id}: ${nazwa}`}</p>
                                </>
                            })}
 

Jak klikam na jakis < li> to wyskakuje mi popup ale jak do niego wrzucic opis z tym samym id? Proszę o jakies wskazówki, albo pomysl jak cos takiego zrobić

 {this.state.isModalOpen &&
                    <div className="container">
                        <div className="title">Modal</div>
                            this.state...map(
                                
                            )}

Zamiast dwóch list w state, możesz zrobić słownik:

state = {};
state["id 1"] = {name:"nazwa1", opis:"opis1"}

const opis1 = state["id 1"].opis;

Jeśli chcesz zostać przy dwóch listach możesz użyć arrow functions:

const opis1 = state.opisy.filter(o => o.IdOpis === "id 1").map(o => o.opis)[0];

Tu jednak może wpaść undefined.
Modal otworzyć można tak:

//wersja 1
 setState({...state, selectedOpis: state.opisy.filter(o => o.IdOpis === "id 1").map(o => o.opis)[0]})
//wersja 2
 setState({...state, selectedOpis: state["id 1"].opis })

{ this.state.selectedOpis &&
 <div className="container">
 <div className="title">Modal</div>
 <p>{this.state.selectedOpis}</p> }

zbyt skomplikowany opis nie rozumiem dzialania tego słownika state["id 1"] to na sztywno wpisales? a chcialbym zeby bylo bardziej uniwersalne bo te tablice opisy oraz nazwy sie wciaz powiekszaja...

Typ Object w JS to słownik klucz-wartość. State który tworzysz jest typu Object. W Twoim przypadku kluczem może być jakieś id. Czyli możesz umieszczać tam różne wartości i pobierać je, podając klucz. Możesz umieścić tam nawet cały obiekt. Możesz też (zazwyczaj) odwoływać się do kluczy jak do właściwości.

const state = {}; //nowy obiekt (słownik)
state["user1"] = { imie: "user1", wiek: 18}; //obiekt pod kluczem
const user = state["user1"]; 
const tenSamUser = state.user1

state["user2"] = { imie: "user2", wiek: 18};// itd.