Display a specific component by its key-CodePudding

I have this WP API data that I'm fetching in to a component called "HostingCard". I am mapping through this component which renders three cards. While mapping through these I am assigning a key to each of them.

       `{hostings.map((hosting) => (
        <HostingCard key={hosting.id} hosting={hosting} setHosting={setHostings} />
    ))}`

Each card has one of these titles "Pro", "Standard" and "Basic".

I made it so that once a card is clicked a new component appears. This component is called "ContactFormular".

Now in the "ContactFormular" component I want to display the information that was on the card that was clicked. is this possible?

Here's the code that opens a new component once the card/button is clicked:

import ContactFormular from './ContactFormular'

const HostingCard = ({post, handleSubmit, hosting, setHosting, showContactDialog, setShowContactDialog, ssl, setPro, pro, key}) => {

  return (
    <div className='noselect hosting-options'>
    <input type="radio" id={post.acf.hosting} name="startup" />
    <div className='card selected-card'>
        <form onSubmit={handleSubmit}>
            <label  for={post.acf.tilvalg} className='label'>
                    <div className='card-header'>
                        <h5>{hosting.acf.title}</h5>
                        <p>{hosting.acf.beskrivelse}</p>
                    </div>
                    <div className='pakke-detaljer'>
                        <div>
                            <p style={{display: hosting.acf.deltaljer ? 'block' : 'none'}}>{hosting.acf.deltaljer}</p>
                        </div>
                    </div>
                    <div className='button-header' onClick={() => setPro(false)}>
                        <button className='btn' onClick={() => setShowContactDialog(true)}>Vælg</button>
                     </div>
                </label>
        </form>
    </div>
        <ContactFormular key={hosting.id} post={post} hosting={hosting} setHosting={setHosting} showContact={showContactDialog} setShowContact={setShowContactDialog} handleSubmit={handleSubmit} ssl={ssl} pro={pro} setPro={setPro}/>
</div>
  )
}

CodePudding user response：

It looks like you're passing in showContactDialog as a parameter and using that to decide whether or not to show this new component right? That means you need showContactDialog to be true for only the one you clicked on, and false for the others. ie each component needs a different state variable. It looks like you might be sharing the same state variable between all components. It's impossible to tell unless you share a reproducible example