score:1
Accepted answer
do not store html node inside state. you can simply store only a boolean value to switch between what node to show. i'm not pretty sure but it may cause weird behavior since react internally depends heavily on the dom/html ui tree (see managing state).
try this instead:
import { usestate } from "react";
import "./styles.css";
function app() {
const [inputval, setinputval] = usestate(""); // initialize as empty string.
const [showdiv, setshowdiv] = usestate(false);
const changedivfunc = () => {
setshowdiv(true);
};
const getinputval = (event) => { // the arg is event object, not val
setinputval(event.target.value);
};
const alertval = () => {
alert(inputval);
};
return (
<div classname="app">
<h1>example</h1>
<br />
<button onclick={changedivfunc}>change div</button>
{
showdiv? (
<div>
<p style={{ color: "red" }}>
hello world. this is updated "show div" value
</p>
<input value={inputval} onchange={getinputval} type="text" />
<br />
<br />
<button onclick={alertval}>show input value</button>
</div>
) : (
<div>
<p>hello world. this is default "show div" value</p>
</div>
)
}
</div>
);
}
export default app;
Source: stackoverflow.com
Related Query
- Getting undefined instead of Input Field value
- Getting Value from Input Field in React JS
- Getting a value of input field in a React component
- Working with react input field says synthetic even when i try and save, and setting value instead of defaultValue is rendering [Object, object]
- ReactJS Ref: undefined error getting input element value
- Getting undefined values from Input Value in ReactJS
- javascript object field input value [object Object] instead of string Reactjs
- How to get the value of an input field using ReactJS?
- Updating a React Input text field with the value on onBlur event
- Set React Input Field Value from JavaScript or JQuery
- How to dynamically update the value for any input field with one event handler function, using hooks
- how to get input field value on button click in react?
- Using an input field with onBlur and a value from state blocks input in Reactjs JSX?
- Does redux-form field value can hold object instead of just a string?
- How do I programatically fill input field value with React?
- Setting the default value inside the input field in the antd library after calling the function in useEffect
- A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined
- How to make input field editable that has a value in reactjs?
- Material-UI InputLabel covers text when Input value set by another Input field
- MobX: Update value in input field
- Getting value of input causing flickering in React
- How to set input value of one field based on another field in formik?
- Get input value of react-geosuggest input field
- How to clear the value of an input field in a functional component without using state?
- Input type text's value not getting updated while using React JS
- getting undefined value of imported function in react
- React Input component unit test value always undefined
- yup validation to Validate formki field whether starts with value of other input field
- Initializing an input field with props value in react
- react input field for text, after rerender the component, the input still hold the old value
More Query from same tag
- React.js, Displaying Two Svg Images Next To Each Other With Space In Between
- how to pass a prop and call a component based on the prop name
- React - Unhandled Rejection (TypeError): e.preventDefault is not a function
- styled-system | Resolve theme style function within component
- Child does not update when generated via array react
- How can I export if / else if statements into the function inside Class component? react, node, express
- How to update data between components?
- How to use typeorm shim in create-react-app now that compilerpaths.path in tsconfig.json is being removed by create-react-app?
- How to debug an error in reactjs
- React Router V4 is updating URL, but not refreshing (React, Redux)
- React component is not rendering activerecord relation in Rails view
- React Printing API Data inside Table
- ReactJS onclick toggle class event multiple times
- Authentication issue - previous user data is shown
- React.js - Value of checkbox not reflecting initial state
- Blank Page after using Route in React
- Alert in if/else statement in React JS
- Reset dropdown by selecting a disabled option as default in React
- Components called by API won't render
- How can I empty the field of the form after submit?
- How can I pass a prop by child index in React
- I want to disable keyboard input for this date picker how to do that?
- How to make table reload after users saves a new row to database
- Why isn't favicon shown up in production?
- How do I integrate react js in play web app
- How to Make React.js component listen to a store in Reflux
- reactjs create dynamic wrapper element in map()
- Handling with external logouts in React app
- updating a single object key value inside array of objects react redux state
- Update TradingView Hotlist Widget onChange