Searching how to display div in react by id

user_18792787 0
Viewed 44

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 class="project" id="project1">
                    <h2>Project 1</h2>
                    <ul class="languse">
                        <li id="languse1">HTML</li>
                        <li id="languse2">CSS</li>
                        <li id="languse3">React</li>
                    </ul>
                    <p class="description">lpwscjdknv hjecbzed nzklma;sasaz nazjdn czej dijznd,aaz da sa os azk</p>
                    <button class="readmore" onClick={() => setShow((s)=> !s)}>Read more</button>
                </div>
                <div class="project" id="project2">
                <h2>Project 2</h2>
                    <ul class="languse">
                        <li id="languse1">CSharp</li>
                        <li id="languse2">C++</li>
                    </ul>
                    <p class="description">lpwscjdknv hjecbzednzklma;sasaz nazjdn czej dijznd,aaz da sa os azk</p>
                    <button class="readmore">Read more</button>
                </div>
reactjs css html
2 Answers

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

Styles

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

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.

user_89327110
Related