Set first element to show on load then hide when clicking on another React

Sam St Aubyn 0
Viewed 39

I have a list of team members, each team member tile has an overlay, this is hidden when clicked on to show it's active, with a correlating text box to show information about them. I'm struggling to see how to make it so the first one will hide the overlay and show the content on load then when you make another selection it will add in the overlay and hide the content.

Currently I have it so when you click on a tile it will hide the overlay and show the content based on the index, and I'm trying to use the useEffect hook to target the first index and give it a true value but I can't set it up to display the first one without showing it constantly or breaking the logic altogether.

My function is below:

function KeyTeamMembers(props) {

    const [isVisible, setIsVisible] = useState(true);

    const toggle = i => {
        if (isVisible == i) {
            return setIsVisible(null)
        }

        setIsVisible(i)
    }

    useEffect((i) => {
         i === 0 ? setIsVisible(true) : setIsVisible(false)
    }, [])

    return (
        <KeyTeamMembersContainer>
            <Container width={14}>
                <Hello><span>2.4</span>Key Team Members</Hello>
                <FlexInline>
                    <HalfWidth>
                        <FlexWrap>
                            {props.team.map((person, i) => (
                                <>
                                    <TeamCardSmall key={slugify(person.firstName)} index={i}>
                                        <TeamCardContent onClick={() => toggle(i)}>
                                                <ThumbnailCover className={isVisible === i ? 'hide-cover' : 'cover' }>
                                                    <p>{person.firstName} {person.lastName}</p>
                                                </ThumbnailCover>
                                            <img src={person.image.fluid.src} alt="Test Images" className="card-item" />
                                        </TeamCardContent>
                                    </TeamCardSmall>
                                </>
                            ))}
                        </FlexWrap>
                    </HalfWidth>
                    <HalfWidth>
                        {props.team.map((person, i) => (
                            <>
                                <TeamCardInfo className={isVisible === i ? 'accordionContent show' : 'accordionContent' } key={slugify(person.lastName)} index={i}>
                                    <TeamCardBio>
                                        <h3>{person.firstName} {person.lastName}</h3>
                                        <BioRole>{person.role}</BioRole>
                                        <p>{person.bio.bio}</p>
                                    </TeamCardBio>
                                </TeamCardInfo>
                            </>
                        ))}
                    </HalfWidth>
                </FlexInline>
            </Container>
        </KeyTeamMembersContainer>
    );
}
reactjs javascript
1 Answers

Try this method:

 function KeyTeamMembers(props) {

    const [isVisible, setIsVisible] = useState(null);

    const toggle = (i) => {
        if (isVisible == i)
            setIsVisible(null)
        else
            setIsVisible(i)
    }


    return (
        <KeyTeamMembersContainer>
            <Container width={14}>
                <Hello><span>2.4</span>Key Team Members</Hello>
                <FlexInline>
                    <HalfWidth>
                        <FlexWrap>
                            {props.team.map((person, i) => (
                                <>
                                    <TeamCardSmall key={slugify(person.firstName)} index={i}>
                                        <TeamCardContent onClick={() => toggle(i)}>
                                                <ThumbnailCover className={isVisible === i ? 'hide-cover' : 'cover' }>
                                                    <p>{person.firstName} {person.lastName}</p>
                                                </ThumbnailCover>
                                            <img src={person.image.fluid.src} alt="Test Images" className="card-item" />
                                        </TeamCardContent>
                                    </TeamCardSmall>
                                </>
                            ))}
                        </FlexWrap>
                    </HalfWidth>
                    <HalfWidth>
                        {props.team.map((person, i) => (
                            <>
                                <TeamCardInfo className={isVisible === i ? 'accordionContent show' : 'accordionContent' } key={slugify(person.lastName)} index={i}>
                                    <TeamCardBio>
                                        <h3>{person.firstName} {person.lastName}</h3>
                                        <BioRole>{person.role}</BioRole>
                                        <p>{person.bio.bio}</p>
                                    </TeamCardBio>
                                </TeamCardInfo>
                            </>
                        ))}
                    </HalfWidth>
                </FlexInline>
            </Container>
        </KeyTeamMembersContainer>
     );
}
Scario Eva0
Related