how correctly 'reset' useState when close modal reactJS - javascript

I would like to explain my problem of the day.
Currently I use a modal in this modal I select a value, this works correctly.
my problem and the following, when I click on the cancel button or the cross to close.
and if I open the modal again, the value select before and still present
I would like to return to its initial state when I click on cancel or the cross
and of course when I open the modal no value in select
iam open to any proposal thank you very much.
ps: leadsOptions in select is data ofc , ps 2 : maybe a useeffect/ prevStateReset to Initial State ?
import React, { useState, useEffect } from "react"
function LeadModal({ isOpen, onClose }) {
const [leadId, setLeadId] = useState(null);
return (
<Modal
open={isOpen}
getOpen={onClose}
>
<PanelHeader>
<PanelTitle>
add lead
</PanelTitle>
<SvgIcon
onClick={onClose}
/>
</PanelHeader>
<PanelBody className="space-y-1 mb-2 ">
<Label>
Sélect lead
</Label>
<div>
<Select
options={leadsOptions}
placeholder="leads"
getValue={(values) => {
setleadId(values.value);
}}
value={leadId}
/>
</div>
</PanelBody>
<PanelFooter>
<div>
<Button onClick={onClose}>
Annuler
</Button>
</div>
</PanelFooter>
</>
</Modal>
);
}

You are not clearing your state data when you open the modal again. Just update the state value with the initial value before closing or canceling the modal or something like this.
<SvgIcon onClick={() => {setLeadId(null); onClose();}} />

Related

5 buttons in separate components change color one at a time triggered by an onclick

export default function ChatButton({showScreen}) {
const [active4, setActive4] = useState(false);
const handleClick4 = () => {
setActive4((prev) => !prev);
showScreen("MessageScreen");
};
return (
<div id="chat-button">
<div
className="button-4"
type="button"
name="chat"
onClick={handleClick4}
style={{
backgroundColor: active4 ? "red" : "black",
borderRadius: "25px",
border: active4 ? "2px solid #e32828f7" : "none",
}}
></div>
</div>
);
}
in this picture it shows one component of a button the and the other four is , ,
which is render in a Button component and almost same code
export default function Buttons({ showScreen}) {
return (
<div id="pda-buttons">
<div className=" row-1">
<div className="buttns d-inline-flex">
<li className="button-list d-flex justify-content-evenly mt-1">
<MailButton showScreen={showScreen} />
<VoiceMailButton showScreen={showScreen} />
<PhoneButton showScreen={showScreen} />
<ChatButton showScreen={showScreen} />
<MapButton showScreen={showScreen} />
</li>
</div>
</div>
</div>
);
}
The propblem is everytime I click one of the the buttons it is working it changes the color of the button that i click but when I click another button it changes the color but the previous color doesnt return to its previuos color the main issue is I want to only one to changes color everytime i click and the other should return to its original form unless it is click
is there a way to solve it in a simple way
There seems to be no problem at all. This is how react works. When you change a button component's state it won't reset until it's parent component or itself re-renders. If you want the children to control other children's states (Button components in this case) there are some techniques. But what I can suggest is that you reconsider your components and lift up the state of each component's active state to their parent. When a child mutates their slice in the parent state to true the others will also be changed to false.
if I understand your question right you want the styles of the clicked button to be applied on one button at a time
if you want to do so you can save a state in buttons component like
const [choice,setChoice]=useState()
and then send your choice and setChoice() to each child , if the choice is empty or it's value=name of current component set the styles you want else don't and use setChoice() whenever you call handleClick4() to save which component is the your current choice

React Button Click should change the display value of div

I got a Navbar which has a button do change the display value of a login form. The Login form and the Login form is a diffrent file, the navbar is a diffrent file and the homepage where it should be display is a diffrent file. Those are the minimal variants of each so that you got some got to understand my problem in detail:
Homepage:
const HomePage = () => {
return (
<div>
<Navbar />
<Login />
<div id="content">
</div>
</div>
);
}
Navbar:
const Navbar= () => {
const showLogin = () => {
document.getElementById('Login').style.display='block';
}
return (
<div id="Navbar">
<NavLink activeClassName="active" to='/'><img src={logo}/></NavLink>
<ul>
...
</ul>
<ul>
<button onClick={showLogin}>Anmelden</button>
</ul>
</div>
);
}
Login-Form:
const Login = () => {
return (
<div id="Login">
<form>
<label>Anmelden</label>
<label for="username">Nutzername</label>
<input name="username" type="text"></input>
<label for="pw">Passwort</label>
<input name="pw" type="password"></input>
<button type="submit">Login</button>
</form>
</div>
);
}
Is there a way to achieve this, or would my easiest option be to include the Login source code into the Navbar source code?
You do not need to move your Login component inside Navbar. Keep it as it is.
You can use useState and Props to switch css classes to show/hide your Login component. I have created very simple solution for you in this CodeSandbox.
Steps:
Create two CSS classes hidden and block
In your Login component add a boolean prop which switches class hidden to block if true.
Create a prop for onClick in the Login component.
Create a useState inside your Homepage which holds a boolean value. That boolean value pass it to the Login page prop and then use onClick prop from Navbar to switch that boolean state
Yes, depending on your CSS system this is easily achievable just by using that.
The React solution is using refs.
The easy way is to create a ref in the parent component and then pass it down as a prop to both components:
In Homepage (i.e. parent), create a ref like so loginRef = useRef(); then pass it down as a prop to the 2 children.
In Login-Form.js you assign that prop on the div with id Login like so <div id='Login' ref={props.loginRef}>
Then in Navbar.js you can use that prop to change its display value like so const showLogin = () => {props.loginRef.current.style.display='block';}
NB: This is a fast and easy way, not best practice but it gets the work done. The best-practice here is to use forwardRef and - super advanced - useImperativeHandle. Take your time and go through the documentation when you're ready.
Login page will show "it is not active" first because active is set to false.but once you click on submit button it will show "it is active"
HomePage
const HomePage = () => {
const[active,setActive]=useState(false);
return (
<div>
<Navbar activesetter={setActive} />
<Login activestatus={active} />
<div id="content">
</div>
</div>
);
}
Login
const Login = (props) => {
return(
<div>
<div>
{props.activestatus ? "it is active" : "it is not active" }
</div>
</div>
);
}
Navbar
const Navbar = (props) => {
const handleSubmit=(e)=> {
e.preventDefault();
props.activesetter(true);
}
return(
<div>
<form onSubmit={handleSubmit}>
<button type="submit">Login</button>
</form>
</div>
);
}

How can i get values of input sent to api on ok button of ant design modal?

I'm trying to implement a kind of table, which has an add button that opens a modal.
Inside the modal, I have the inputs that I want to update in the table, but using the ant design modal it has an ok button and a cancel button. How do I make the path to get the values? I'm having trouble understanding/writing this syntax. Can someone help me?
on the "onOk", i don't know how to write the function, tried creating a onSubmit(values) and console.log it but it doesn't show
Here's the code
function showModal(nome,colunas) {
setFormDisplay("");
setModal(!modal);
setFormName(nome);
setFormColumns(colunas);
}
function cancelModal() {
setFormDisplay("none");
setModal(false);
setFormName("");
setFormColumns([]);
}
<>
<div className="">
<CardsHost posts={nomes} />
</div>
<Modal
visible={modal}
onOk={}
title="Novo Prontuário"
onCancel={cancelModal}
style={{display:`${formDisplay}`}}
width={1000}
>
{formColumns.map((column,index) => (
<>
<div className="labelll">
<label key={`label-${index}`}>{column.title}</label>
{(column.key !=='proc' && column.key !== 'meds' )
? <Input key={`input-${index}`} style={{ width: "61.3%" }} />
: (column.key == 'proc' ) ? <div className="pesquisa-input"><Demo /></div>
: <div className="pesquisa-input"><PageComponentMeds /> </div>
}
</div>
{/*<div className="labelll">
<label> Data de Atendimento</label>
<DatePicker style={{ width: "61.3%" }} />
</div>
<div className="labelll">
<label> Nota </label>
<TextArea style={{ width: "61.3%" }} />
</div> */}
</>
))}
</Modal>
</>
);
}
The easiest way would be use to add a state variable for both of your input values. You can update them using the onChange callback provided by the antd components. On submit you use the state values to make your api call.
Make sure that you reset the variables on cancel and after a successful call.

Stopping propogation of button that contains tooltip with link not working on Button

I am using the Material UI Button Component and in the button, there is text. And right next to that text, I have a tooltip. And in that tooltip, there is a link to an article. The idea is that I want the user to have a chance to be able to click the 'read more' link inside the tooltip before clicking the actual button. The issue is that when clicking the 'read more' link that is inside the tooltip, it actually clicks the button instead. I have tried to use the e.stopPropagation event that supposedly stops the component from bubbling to other elements. But it still doesnt prevent the button from being clicked instead of the 'read more' link that is within the tooltip. Please see my code below:
render() {
const { buttonStyleOverride, classes } = this.props;
const { buttonDisabled } = this.state;
return (
<Button
name="buyItem"
variant="outlined"
style={buttonStyleOverride}
className={classes.button}
color="primary"
disabled={buttonDisabled}
onClick={
this.addItems,
e => e.stopPropagation()
}>
Buy Pikafoods
<TooltipIcon
title="You can read more about pikafoods here."
learnMoreLink="https://pokemon.com/articles/pikafoods"
style={{ position: 'relative', top: '-2px' }} />
</Button>
);
}
}
It's really strange a clickable tooltip inside a button, not very user friendly.
However you have to stop the propagation in the tooltip event, not in the button, like this:
import { Button } from "#material-ui/core";
import AccessibilityIcon from "#material-ui/icons/Accessibility";
export default function App() {
return (
<div className="App">
<Button
name="buyItem"
variant="outlined"
color="primary"
onClick={(e) => console.log("button")}
>
Buy Pikafoods
<AccessibilityIcon
onClick={(e) => {
console.log("tooltip");
e.stopPropagation();
}}
/>
</Button>
</div>
);
}

close React Dialog with a button

I want to open the diaglog when the screen is visited so I set the default state to true. I made a custom button. When I click on it, the state should change to false and the dialog should close. However, the dialog doesnt close. What am I doing wrong and how else can I close the dialog?
<Dialog open={openReminder}>
<DialogTitle>Reminder</DialogTitle>
<DialogContent>
<DialogContentText>Don't forget to take your daily walk!</DialogContentText>
<div className={classes.reminderContainer}>
<DialogButton
text={"Ok, thanks!"}
onPress={() => setOpenReminder(false)}
/>
</div>
</DialogContent>
</Dialog>
export const DialogButton = ({ onPress, text }) => {
const classes = useStyles();
return (
<Button onPress={onPress} className={classes.button}>
{text}
</Button>
);
};
Issue is with the onPress event try using onClick,
<Button onClick={onPress} className={classes.button}>
{text}
</Button>
Two things which I note :
You need to change onPress to OnClick inside like this :
<Button onClick={onPress} className={classes.button}>
{text}
</Button>
Check inside your Dialog component that you explicitly hide it when 'open' prop is set to false.
<DialogButton text={"Ok, thanks!"} onPress={()=>setOpenReminder(!openReminder)}/>
<Button onClick={onPress} className={classes.button}>
{text}
</Button>
Change the onPress with onClick in your child component like this.
<Button onClick={onPress} className={classes.button}>
{text}
</Button>
check out if it works.

Categories

Resources