Trying to render each p content on individual button

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

Please post actual code instead of screenshots. Thanks

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'>
                    <h1>Frequently Ask Question</h1>
                    {, i) => (
                        <div className='minus'>
                            <div className='FaqInlineBotton'>
                                <h3 className='titleFQtext'>{faqsData.title}</h3>
                                <button className='FQBtn'
                                    onClick={() => {
                                >{openFaqQuestion ? '-' : '+'}
                                {openFaqQuestion && <p className='descFQ'>{faqsData.desc}</p>}
                            {/* {openFaqQuestion && <p>{faqsData.desc}</p>} */}

export default FrequentQ;

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 (').

ooh thanks do i need reposting it??

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.