Trying to render each p content on individual button

[Bellions]

Hello guys please how can i make each FAQ render on its own without all render the paragraphy at once

[JeremyLT]

Please post actual code instead of screenshots. Thanks

[Bellions]

import React, { useState } from 'react'
import { faqsDatas } from "./data";
import "./FrequentQ.css";

const FrequentQ = () => {
    const [openFaqQuestion, setOpenFaqQuestion] = useState(false);
    return (
        <section className='FrequentWrapper'>
            <div className='FrequentContainer'>
                <div>
                    <h1>Frequently Ask Question</h1>
                </div>
                <div>
                    {faqsDatas.map((faqsData, i) => (
                        <div className='minus'>
                            <div className='FaqInlineBotton'>
                                <h3 className='titleFQtext'>{faqsData.title}</h3>
                                <button className='FQBtn'
                                    onClick={() => {
                                        setOpenFaqQuestion(!openFaqQuestion);
                                    }}
                                >{openFaqQuestion ? '-' : '+'}
                                </button>
                            </div>
                            <div>
                                {openFaqQuestion && <p className='descFQ'>{faqsData.desc}</p>}
                            </div>
                            {/* {openFaqQuestion && <p>{faqsData.desc}</p>} */}
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}

export default FrequentQ;

[JeremyLT]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[Bellions]

ooh thanks do i need reposting it??

[lasjorg]

If they all share the same state variable they will all open and close.

I might suggest using the details element for this instead that way you may not even need state. And/or extract it out into its own FAQ component and handle the toggle state inside the component. Although, they will not toggle each other’s open/close state if that is what you want.

Another option is to add a boolean property to the objects, like isOpen, and toggle that. Then conditionally render based on that property. Just like you might have for a todo list with a completed property.