score:1
you are only calling buildcontrols
once, where the <input ...
gets its value only that single time.
whenever react re-renders your component (because e.g. some state changes), your {controls}
will tell react to render that original <input ...
with the old value.
i'm not sure why you are storing your controls in a state variable? there's no need for that, and as you noticed, it complicates things a lot. you would basically require a rendercontrols()
function too that you would replace {controls}
with.
score:2
i'd move your inputs out of that component, and let them manage their own state out of the tipselector.
see:
https://codesandbox.io/s/naughty-http-d38w9
e.g.:
import { usestate, useeffect } from "react";
import custominput from "./input";
function tipselector({ selections, ontipchanged }) {
const [controls, setcontrols] = usestate([]);
//build controls
function buildcontrols() {
let controllist = [];
controllist.push(<custominput />);
controllist.push(<custominput />);
setcontrols(controllist);
}
useeffect(() => {
buildcontrols();
return () => {
console.log("unmounts");
};
}, []);
return (
<div>
<span>select tip %</span>
<div>{controls}</div>
</div>
);
}
export default tipselector;
import { usestate, useeffect } from "react";
function custominput() {
const [tip, settip] = usestate("0");
function customtipchanged(percent) {
settip(percent);
}
return (
<input
value={tip.tostring()}
onchange={(event) => {
customtipchanged(event.target.value);
}}
></input>
);
}
export default custominput;
Source: stackoverflow.com
Related Query
- input value not updating when mutating state
- ReactJS component state is not updating when any value in state array is modified
- State value not updating when passed as route prop
- Ant design Form validation is not working and not updating input values when component is from a state that is passed from a function
- React - input date field not updating value in state
- rule validation not triggered on input field when value is changed from React state
- Input element's value in react component is not getting re-rendered when the state changes
- State variable inside a function defined within useEffect hook is not updating when value changes
- Value of state within React context not updating when used in another component
- State is not updating when using React form. I am trying to use the user input to display an order confirmation in a modal
- My state is not updating when typing on the input element
- react state is not updating when it's value changes
- Why parent state is not updating when I change a value on a child but it is working the other way around
- Input field not updating from redux state but displays value on console.log in react
- React only saves input value state on typing but not when filled by API data
- State not updating when using React state hook within setInterval
- React + Redux - Input onChange is very slow when typing in when the input have a value from the state
- React component not updating when store state has changed
- react-chartjs-2 not updating graph when state updates
- State not updating when receiving new props (ReactJS)
- Props not updating when redux state change in React Hooks
- Ant Design Input Component not updating value
- useEffect not being called and not updating state when api is fetched
- react is not updating functional component state on input change
- React Hook useCallback not updating State value
- Redux not updating components when deep Immutable state properties are updated
- NextJS initial state is not updating when routing to same page with different params
- userEvent.type not updating value of input in test
- React is not updating when Redux state is changed below the first level
- Updating initialValues prop on Formik Form does not update input value
More Query from same tag
- How to get data back from reducer with a async action
- How to store data from json API response into array in ReactJS?
- Strange string conditions in JavaScript
- import connected and disconnected components React, Redux
- How to merge similar custom hooks into one custom hooks
- Property 'style' does not exist on type 'ChildNode' Type Script
- how to get data from redux in componentDIdMount?
- I'm creating a function where non Login user cant add to cart
- Fetch response db.json is one object instead an array of objects
- onChange and onSelect are not working for Select inside a loop in React Hooks
- How to fix NPM vulnerabilities
- reload button in html
- Reactjs after build got not found when refresh in a specific Url
- How to get data from document in a parent collection based on a query in a subcollection
- Why does it return undefined when I try to get the height and width of an image in react.js
- How I can draw below chart with any chart libarray
- How can i apply onClick only on my upper component?
- Whenever I Put the payment page on my app, it goes blank on ReactJS
- DraftJS WYSIWYG - Cannot Load Content Into Component
- Binding state to Route Switch
- ReactJS: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
- useEffect .map not a function React Hooks
- Unhandled Rejection (TypeError): fs.readdir is not a function
- Get Firestore data before rendering in React
- Why do I have to spread my object twice when copying state from my react object
- React : Access data in .json file to check if it matches with an input
- How to programmatically navigate using react router
- Dependent Asynchronous Calls in Redux Saga
- Environment variables - undefined
- Hide React button after it is clicked