Searching how to display div in react by id-CodePudding

Here is my code im searching a way to make the onclick in the project1 only display the "project1shown" and then each button in each project will display the correct project*shown for their number , i've made many research but i have a probably a misunderstood in the syntax.


const Mywork =() => {
  const  [show, setShow] = useState(false);
    return (
        <section id="mywork">
            <div id="projectbox">
            <div id="project1shown" style={{display: show ? "block" : "none"}}>Oh la dinguerie !</div>
            <div id="project2shown" style={{display: show ? "block" : "none"}}>Je comprends plus la !</div>
            <div id="project3shown" style={{display: show ? "block" : "none"}}>DERRIERE TOI !</div>
            <div id="project4shown" style={{display: show ? "block" : "none"}}>Attend mais !</div>
            <div id="project5shown" style={{display: show ? "block" : "none"}}>Et bah dis donc !</div>
            <div id="project6shown" style={{display: show ? "block" : "none"}}>Il est content d'être heureux celui ci !</div>

                <div  id="project1">
                    <h2>Project 1</h2>
                    <ul >
                        <li id="languse1">HTML</li>
                        <li id="languse2">CSS</li>
                        <li id="languse3">React</li>
                    </ul>
                    <p >lpwscjdknv hjecbzed nzklma;sasaz nazjdn czej dijznd,aaz da sa os azk</p>
                    <button  onClick={() => setShow((s)=> !s)}>Read more</button>
                </div>
                <div  id="project2">
                <h2>Project 2</h2>
                    <ul >
                        <li id="languse1">CSharp</li>
                        <li id="languse2">C  </li>
                    </ul>
                    <p >lpwscjdknv hjecbzednzklma;sasaz nazjdn czej dijznd,aaz da sa os azk</p>
                    <button >Read more</button>
                </div>

CodePudding user response：

One way you could do this is by passing the name of the project you want to show to your onclick function. Then instead of using the ternary operation on styles, you can instead apply this to a class. Here is an example of what I did to make this work:

  const  [show, setShow] = useState(null);

  return (
      <div id="projectbox">
            <div id="project1shown" class={"project1shown" ==  show ? "projectShowing" : "projectHidden"}>Oh la dinguerie !</div>
            <div id="project2shown" class={"project2shown" ==  show ? "projectShowing" : "projectHidden"}>Je comprends plus la !</div>
            <div id="project3shown" class={"project3shown" ==  show ? "projectShowing" : "projectHidden"}>DERRIERE TOI !</div>
            <div id="project4shown" class={"project4shown" ==  show ? "projectShowing" : "projectHidden"}>Attend mais !</div>
            <div id="project5shown" class={"project5shown" ==  show ? "projectShowing" : "projectHidden"}>Et bah dis donc !</div>
            <div id="project6shown" class={"project6shown" ==  show ? "projectShowing" : "projectHidden"}>Il est content d'être heureux celui ci !</div>

            <div  id="project1">
                <h2>Project 1</h2>
                <ul >
                    <li id="languse1">HTML</li>
                    <li id="languse2">CSS</li>
                    <li id="languse3">React</li>
                </ul>
                <p >lpwscjdknv hjecbzed nzklma;sasaz nazjdn czej dijznd,aaz da sa os azk</p>
                <button  onClick={() => setShow("project1shown")}>Read more</button>
                <button  onClick={() => setShow("project2shown")}>Read more</button>
                <button  onClick={() => setShow("project3shown")}>Read more</button>
                <button  onClick={() => setShow("project4shown")}>Read more</button>
                <button  onClick={() => setShow("project5shown")}>Read more</button>
                <button  onClick={() => setShow("project6shown")}>Read more</button>
            </div>
        </div>
  );

Styles

.projectHidden{
  display: none;
}
.projectShowing{
  display: block;
}

CodePudding user response：

The problem you will encounter here is that every project shown is pointing at the same show state, so when true, they will all show.

const [show, setShow] = useState(false);

If only one project is shown at a time, you could use an identifier for which project should be shown instead of a boolean.

If you need to show multiple at one time, you might want to consider the architecture here and see if there is a way you can bundle your show project logic into a child component that can have its own state.