Minimise The Code Since I Am Using The Same Code Only The Content In P Tags Changes And Component AccordionHeader Header Changes

I am new to js. i need to display 6 sliders. each div when I click should open its corresponding content. when i click the div again the content should be closed. just like an acc

Solution 1:

try to use just one static and pass the text that will be on the p tag as a parameter, so you don't have a lot of functions there

     static accordion(ballInfo, content) {
        if (ballInfo.isRetrieving) {
            return (
                <LoadingIndicator key="foulLoading" />
            );
        } else if (ballInfo.error) {
            return (
                <span className="right-align negative">Unavailable</span>
            );
        } else {
            return (
                <div className="jump-player-question-answer jump-submenu-dropmenuContents">
                    <p>
                        {{content}}
                    </p>
                </div>
            );
        }
    }

so on your call to the accordion, you just add the other parameter

 <AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader" header="ball ball ball ball sjsdsdkjjksddjks?" content={PLAYER.accordion(ballInfo, "qwe")} />

 <AccordionHeader className="jump-player-question-title jump-submenu-dropmenuHeader" header="dsknjdsncjdnsjkcsdnjcsdncjkdsn" content={PLAYER.accordion(ballInfo, "asd")} />