Display a specific component by its key

Question

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>
  )
}

"I made it so that once a card is clicked a new component appears." can you show us the code you have for that? — acdcjunior, Oct 22 '22 at 16:13
I don't get it, you're passing in the `hosting` object as a parameter, does that not have the data you need? — Chris Hamilton, Oct 22 '22 at 16:23
@ChrisHamilton Yes it does. But! When I want to render some of this data I use dot notation and so to render the title I would write
{hosting.acf.title}
. It does return data. but not the data from the card I clicked. It returns data from the "basic" card no matter what card I click. — Mattyb, Oct 22 '22 at 16:27
Are you perhaps sharing the same `showContactDialog` variable between all components? ie. clicking on one reveals all of them? The basic one just happens to be on top? You're gonna have to show more code. — Chris Hamilton, Oct 22 '22 at 16:30
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. — Chris Hamilton, Oct 22 '22 at 16:34
@ChrisHamilton Yes you are right. How would assign different states when I'm mapping over a component — Mattyb, Oct 22 '22 at 16:37
Call `useState` inside the `HostingCard`, not in the parent. — Chris Hamilton, Oct 22 '22 at 16:37
@ChrisHamilton I did not realise! Thank you so much! Worked like a charm! — Mattyb, Oct 22 '22 at 16:40

score 0 · Accepted Answer · answered Oct 22 '22 at 17:38

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

Display a specific component by its key

{hosting.acf.title}

1 Answers1