admin管理员组

文章数量:1026640

I am very new to React.JS, trying to wrap my head around it. So my intention is this. Toggle between two different App(Counter and Random) based on button clicked.

I just want to toggle between two different DIV based on button clicked

Counter.JS

import { useState } from "react"
import './index.css';



function Counter(){

    var [count,setmyname] = useState(0);

    function Increment(){
        setmyname(count = count+1);
        console.log(count)
    }

    function Decrement(){
        setmyname(count = count-1);
        console.log(count)
    }
    function Reset(){
        setmyname(count = 0);
        console.log(count)
    }
    
    return(
        <div className="center">
           
            <div className="counter_app">
            <h1>Counter App</h1>
            <h1 className="count">{count}</h1>
            <div className="button_class">
            <button className="increment" onClick={Increment}>Increment</button>
            <button className="decrement" onClick={Decrement}>Decrement</button>
            <button className="reset" onClick={Reset}>Reset</button>
            </div>
            </div>

          
        </div>
    )
}

export default Counter`

Random.JS

function Random(){
   

    var [number,SetRandom] = useState(0);

    function GetRandom(){
        SetRandom(Math.floor(Math.random() *10));
        console.log(number);
    }
    return(
        <div className="random_center">
            <div className="random_app">
            <h1>Random App</h1>
            <button className="random" onClick={GetRandom}>Random</button>
            <p>{number}</p>
            </div>
        </div>
    )
}

export default Random

App.JS

import Counter from "./counter"
import { useState } from "react"
import Random from "./random"
import ReactDOM from "react-dom/client"

function App(){
   

  var [button,SetButton] = useState(1);

  function GetDiv(){
    
  }
 
  return(
    <div className="container">
    <button onClick={}>Counter App</button>
    <button onClick={}>Random App</button>
    
     
     
    </div>
  )
}

export default App

Index.JS

const root=ReactDOM.createRoot(document.getElementById("root"));

root.render(<App></App>
);

I have added four JS files for toggling between the button. I am sure there might be a better way to do this. I am not sure how to do DOM Manipulation In React.JS. Let me know how to do it. Thanks so much.

I am very new to React.JS, trying to wrap my head around it. So my intention is this. Toggle between two different App(Counter and Random) based on button clicked.

I just want to toggle between two different DIV based on button clicked

Counter.JS

import { useState } from "react"
import './index.css';



function Counter(){

    var [count,setmyname] = useState(0);

    function Increment(){
        setmyname(count = count+1);
        console.log(count)
    }

    function Decrement(){
        setmyname(count = count-1);
        console.log(count)
    }
    function Reset(){
        setmyname(count = 0);
        console.log(count)
    }
    
    return(
        <div className="center">
           
            <div className="counter_app">
            <h1>Counter App</h1>
            <h1 className="count">{count}</h1>
            <div className="button_class">
            <button className="increment" onClick={Increment}>Increment</button>
            <button className="decrement" onClick={Decrement}>Decrement</button>
            <button className="reset" onClick={Reset}>Reset</button>
            </div>
            </div>

          
        </div>
    )
}

export default Counter`

Random.JS

function Random(){
   

    var [number,SetRandom] = useState(0);

    function GetRandom(){
        SetRandom(Math.floor(Math.random() *10));
        console.log(number);
    }
    return(
        <div className="random_center">
            <div className="random_app">
            <h1>Random App</h1>
            <button className="random" onClick={GetRandom}>Random</button>
            <p>{number}</p>
            </div>
        </div>
    )
}

export default Random

App.JS

import Counter from "./counter"
import { useState } from "react"
import Random from "./random"
import ReactDOM from "react-dom/client"

function App(){
   

  var [button,SetButton] = useState(1);

  function GetDiv(){
    
  }
 
  return(
    <div className="container">
    <button onClick={}>Counter App</button>
    <button onClick={}>Random App</button>
    
     
     
    </div>
  )
}

export default App

Index.JS

const root=ReactDOM.createRoot(document.getElementById("root"));

root.render(<App></App>
);

I have added four JS files for toggling between the button. I am sure there might be a better way to do this. I am not sure how to do DOM Manipulation In React.JS. Let me know how to do it. Thanks so much.

  • html
  • css
  • reactjs
  • dom-manipulation
Share Improve this question edited Nov 16, 2024 at 17:21 DarkBee 15.5k8 gold badges72 silver badges118 bronze badges asked Nov 16, 2024 at 16:36 Nisha ShajahanNisha Shajahan 152 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

I believe your Index.Js is fine.

To switch between both, in your App.js you use React's States (https://react.dev/reference/react/useState) as you've guessed, but you're not using it correctly :

 var [counter,SetCounterIsActive] = useState(true);

return
<div>
  <button onClick={() => SetCounterIsActive(true)}>Show Counter</button>
  <button onClick={() => SetCounterIsActive(false)}>Show Random</button>

   {counter ? <Counter /> : <Random />}
</div>

Using the React Conditional Rendering, you can make the one that you want show up

I am very new to React.JS, trying to wrap my head around it. So my intention is this. Toggle between two different App(Counter and Random) based on button clicked.

I just want to toggle between two different DIV based on button clicked

Counter.JS

import { useState } from "react"
import './index.css';



function Counter(){

    var [count,setmyname] = useState(0);

    function Increment(){
        setmyname(count = count+1);
        console.log(count)
    }

    function Decrement(){
        setmyname(count = count-1);
        console.log(count)
    }
    function Reset(){
        setmyname(count = 0);
        console.log(count)
    }
    
    return(
        <div className="center">
           
            <div className="counter_app">
            <h1>Counter App</h1>
            <h1 className="count">{count}</h1>
            <div className="button_class">
            <button className="increment" onClick={Increment}>Increment</button>
            <button className="decrement" onClick={Decrement}>Decrement</button>
            <button className="reset" onClick={Reset}>Reset</button>
            </div>
            </div>

          
        </div>
    )
}

export default Counter`

Random.JS

function Random(){
   

    var [number,SetRandom] = useState(0);

    function GetRandom(){
        SetRandom(Math.floor(Math.random() *10));
        console.log(number);
    }
    return(
        <div className="random_center">
            <div className="random_app">
            <h1>Random App</h1>
            <button className="random" onClick={GetRandom}>Random</button>
            <p>{number}</p>
            </div>
        </div>
    )
}

export default Random

App.JS

import Counter from "./counter"
import { useState } from "react"
import Random from "./random"
import ReactDOM from "react-dom/client"

function App(){
   

  var [button,SetButton] = useState(1);

  function GetDiv(){
    
  }
 
  return(
    <div className="container">
    <button onClick={}>Counter App</button>
    <button onClick={}>Random App</button>
    
     
     
    </div>
  )
}

export default App

Index.JS

const root=ReactDOM.createRoot(document.getElementById("root"));

root.render(<App></App>
);

I have added four JS files for toggling between the button. I am sure there might be a better way to do this. I am not sure how to do DOM Manipulation In React.JS. Let me know how to do it. Thanks so much.

I am very new to React.JS, trying to wrap my head around it. So my intention is this. Toggle between two different App(Counter and Random) based on button clicked.

I just want to toggle between two different DIV based on button clicked

Counter.JS

import { useState } from "react"
import './index.css';



function Counter(){

    var [count,setmyname] = useState(0);

    function Increment(){
        setmyname(count = count+1);
        console.log(count)
    }

    function Decrement(){
        setmyname(count = count-1);
        console.log(count)
    }
    function Reset(){
        setmyname(count = 0);
        console.log(count)
    }
    
    return(
        <div className="center">
           
            <div className="counter_app">
            <h1>Counter App</h1>
            <h1 className="count">{count}</h1>
            <div className="button_class">
            <button className="increment" onClick={Increment}>Increment</button>
            <button className="decrement" onClick={Decrement}>Decrement</button>
            <button className="reset" onClick={Reset}>Reset</button>
            </div>
            </div>

          
        </div>
    )
}

export default Counter`

Random.JS

function Random(){
   

    var [number,SetRandom] = useState(0);

    function GetRandom(){
        SetRandom(Math.floor(Math.random() *10));
        console.log(number);
    }
    return(
        <div className="random_center">
            <div className="random_app">
            <h1>Random App</h1>
            <button className="random" onClick={GetRandom}>Random</button>
            <p>{number}</p>
            </div>
        </div>
    )
}

export default Random

App.JS

import Counter from "./counter"
import { useState } from "react"
import Random from "./random"
import ReactDOM from "react-dom/client"

function App(){
   

  var [button,SetButton] = useState(1);

  function GetDiv(){
    
  }
 
  return(
    <div className="container">
    <button onClick={}>Counter App</button>
    <button onClick={}>Random App</button>
    
     
     
    </div>
  )
}

export default App

Index.JS

const root=ReactDOM.createRoot(document.getElementById("root"));

root.render(<App></App>
);

I have added four JS files for toggling between the button. I am sure there might be a better way to do this. I am not sure how to do DOM Manipulation In React.JS. Let me know how to do it. Thanks so much.

  • html
  • css
  • reactjs
  • dom-manipulation
Share Improve this question edited Nov 16, 2024 at 17:21 DarkBee 15.5k8 gold badges72 silver badges118 bronze badges asked Nov 16, 2024 at 16:36 Nisha ShajahanNisha Shajahan 152 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

I believe your Index.Js is fine.

To switch between both, in your App.js you use React's States (https://react.dev/reference/react/useState) as you've guessed, but you're not using it correctly :

 var [counter,SetCounterIsActive] = useState(true);

return
<div>
  <button onClick={() => SetCounterIsActive(true)}>Show Counter</button>
  <button onClick={() => SetCounterIsActive(false)}>Show Random</button>

   {counter ? <Counter /> : <Random />}
</div>

Using the React Conditional Rendering, you can make the one that you want show up

本文标签： htmlToggle between two different divs based on two button clicksStack Overflow

版权声明：本文标题：html - Toggle between two different divs based on two button clicks - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745651666a2161355.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。