I try using Progress from antd.
I use it in my react function component:
const [percent, setpercent] = useState(0)
if I use it directly in my onclick event, it works perfectly.
<div onClick={(e)=>{setpercent(10)}} >
click me
</div>
but if I use function to trigger the change:
function handlepercent(v){
setpercent(v)
}
the value in the Progress will update, but it is not animated.
Not sure if it is the bug or is there something wrong with the code.
please check the code bellow
https://codesandbox.io/s/suspicious-estrela-liz522?file=/src/App.js
import { Progress } from "antd";
import { useState } from "react";
import "./styles.css";
export default function App() {
const [percent, setpercent] = useState(0);
function handlepercent(v) {
setpercent(v);
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Progress percent={percent} />
<button type="button" onClick={() => handlepercent(50)}>
50%
</button>
<button type="button" onClick={() => setpercent(100)}>
100%
</button>
</div>
);
}
Related
I have one div element and inside it has one button A. and there is button B outside which is hidden by default
so when I click button A, the whole div should hide including button A, and also it should display the hidden button B.
And when I click button B, it should open the div and hide.
How can I achieve this in reactjs.
This is what I have tried, but it is not showing any button on the screen
import React from 'react'
import useState from 'react-dom'
const App = () => {
const [show,setShow]=useState(true)
return(
<>
{show && <div>
Hello
<button>button A</button>
</div>}
<button onClick={()=>setShow(!show)}>button 2</button>
</>
)
Take a look at how this code is setting and using the show boolean state value for Button A and Button B.
const { useState } = React;
const App = () => {
const [show, setShow] = useState(true)
return (
<div>
{show && <div>
Hello
<button onClick={()=>setShow(!show)}>Button A</button>
</div>}
{!show &&
<button onClick={()=>setShow(!show)}>
Button B
</button>
}
</div>
);
}
// Render it
ReactDOM.render(
<App />,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
Note: Make sure you're importing useState from 'react' in your code. I had to write it as const {useState} = React; in order to get the above code snippet to work as expected.
You can write something like below
import React, { useState } from "react";
export default function ToogelButton({ children }) {
// React state to manage visibility
const [showButtonB, setShowButtonB] = useState(false);
// function to toggle the boolean value
function toggleShow() {
setShowButtonB(showButtonB => !showButtonB);
}
if(showButtonB) {
return (
// Button B
<button onClick={toggleShow}>BUTTON B</button>
);
}
return (
// Button A and content
<div className="container">
Test Content
<button onClick={toggleShow}>BUTTON A</button>
</div>
);
}
this is my card js here i have mapped the data from my productdata file and used the states
to get my popup data on the click of more info button. But with this code i am not able to
reflect the change to only one card. I am not getting how can i only reflect this change to my
selected card.
import React, {useState} from 'react';
import Modal from '../Modal';
import productCard from "./productData";
function Card() {
const [showModal, setShowModal] = useState(false);
const openModal = (value) => {
setShowModal(prev => !prev)
};
const listitems = productCard.map((item) =>
<div className="card" key={item.id}>
<div className="card_img">
<img src={item.thumb} alt="img" />
</div>
<div className="card_header">
<h2>{item.product_name}</h2>
<p>{item.description}</p>
<button className="description" onClick={() =>openModal(item.id)}>More
Info</button>
<Modal showModal={showModal} setShowModal={()=>setShowModal(item.id)} />
<p className="price">{item.price}<span>{item.currency}</span></p>
<div className="btn">Add to cart</div>
</div>
</div>)
return (
<>
<h2 className="content_title">Product list</h2>
{/* <div>{this.state.count}</div> */}
<div className="main_content">
<h3>MOBILES</h3>
{listitems};
</div>
</>
)
}
export default Card;
and this is my modal js:
when i click on the more info button it popups the changes with all the cards
import React from 'react';
const Modal = ({showModal, setShowModal}) => {
console.log(showModal)
return (
<>
{showModal ?
<div>hello</div> : null
}
</>
)
}
export default Modal
Each card item from your "listitems" and its child Modal shares the same showModal state. I would recommend creating a separate "Card" component which has its own "showModal" state, controlled by its own button, and pass the "item" as a prop inside that component through a similar mapping of "productCard" like you've done.
I am trying to toggle true/false in my component using useState but I've noticed it only toggles one time and does not go back and forth. On clicking the component, it toggles true but then it won't toggle back to false. Any ideas on how to solve?
const [sound, setSound] = useState(false);
return (
<div>
<ReactPlayer
...
muted={sound}
onClick={() => {
setSound(!sound);
console.log("on click", sound);
}}
/>
</div>
)
EDIT
Thanks for the replies, I think the issue was the anon function, I solved it by doing this
onClick={() => {
setSound((sound) => !sound);
console.log("on click", sound);
}}
import React, {useState} from 'react';
import './App.css';
const ReactPlayer = ({muted, onClick}: {muted: boolean, onClick: () => any}) => {
return (
<div>
<button onClick={onClick}>Test</button>
<p>{muted.toString()}</p>
</div>
)
}
function App() {
const [sound, setSound] = useState(false);
return (
<div className="App">
<ReactPlayer
muted={sound}
onClick={() => {
setSound(!sound);
console.log("on click", sound);
}}
/>
</div>
);
}
export default App;
This code works perfectly, I don't know what you have in your ReactPlayer component, but this should work
As of Chrome 66, videos must be muted in order to play automatically. Some players, like Facebook, cannot be unmuted until the user interacts with the video, so you may want to enable controls to allow users to unmute videos themselves. Please set muted={true}. see docs for more info
Check the live code here in sandbox link
import ReactPlayer from "react-player";
import React, { useState } from "react";
// Render a YouTube video player
export default function App() {
const [play, setPlay] = useState(true);
return (
<div className="App">
<ReactPlayer
muted={play}
url="https://www.youtube.com/watch?v=9DDX3US3kss"
/>
Click to Mute or Unmute --
<button style={{ margin: "15px" }} onClick={() => setPlay(!play)}>
Mute/UnMute
</button>
</div>
);
}
I am very new to React hooks can someone please help me how to show a button after 10 seconds I tried a little but I don't know how to implement it.
This is my code
import React, { useState, useEffect } from 'react';
import './App.css';
const App = () => {
const [show, setShow] = useState(false)
useEffect(() => {
});
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className='main'>
<button className='btn btn-primary'>Click here</button>
</div>
</div>
</div>
</div>
)
}
export default App
```
Try this:
useEffect(() => {
setTimeout(() => setShow(true), 10000);
}, []); []: this is important as it will run this effect only once on component load
and use it like:
{show && <button className='btn btn-primary'>Click here</button>} // this will show the button when show state will be true
I am working on React project, In that I have App.js component, in that component I have button Now please tell me how to change button background color and button text color by using react hooks
This is App.js
import React, { useState } from 'react';
import './App.css';
function App() {
return (
<div className="App">
<button className='btn btn-primary'>Click here</button>
</div>
);
}
export default App;
try this
function App() {
const [color,setColor]=useState('red');
const [textColor,setTextColor]=useState('white');
return (
<div className="App">
<button style={{background:color,color:textColor}} className='btn btn-primary' onClick={()=>{setColor("black");setTextColor('red')}}>Click here</button>
</div>
);
}
export default App;
OR
check link : https://stackblitz.com/edit/react-x7mevv
App.js
function App() {
const [toggle,setToggle] = React.useState(false);
const toggleIt =()=>{
setToggle(!toggle)
}
return (
<div className="App">
<button onClick={toggleIt}>{toggle?'Hide':'Show'}</button>
<div className={toggle&&'body-color'}>
Body
</div>
</div>
);
}
class in App.css
.body-color{
background: coral;
height:100vh;
}