score:0
you should use setsinglesizing function to update your state. you should not mutate your state directly as in your updatesinglesizing function. also you are returning a boolean by using the === operator. try something like this (i am not impelmenting your array logic.)
onchange={(e) => setsinglesizing(e.target.value)}
score:1
the singlesizing
object is not updated when the text changes from the textfield
's onchange
event. the updatesinglesizing
function just returns the new values but it doesn't update the singlesizing
object.
so we need a function to update the singlesizing
object. the ontextchange
function updates the singlesizing
object (more about spread syntax) when the textfield
text changes.
const ontextchange = (e) => {
const id = e.target.id;
const value = e.target.value;
setsinglesizing({
...singlesizing,
[id]: value
});
};
and the textfields updated with id
property to update the actual property of singlesizing
object.
<sizingtextfields
id="taxonomyid"
val={singlesizing.taxonomyid}
label={"taxonomy id"}
/>
<sizingtextfields
id="domain"
val={singlesizing.domain}
label={"domain"}
/>
<sizingtextfields
id="experience"
val={singlesizing.experience}
label={"experience"}
/>
....
also, the textfield
's select
property expects child component and options. so the sizingtextfields
function updated with child component.
const sizingtextfields = ({
id,
val,
label,
disabled,
select = false,
options = []
}) => {
return select ? (
<textfield
id={id}
value={val}
label={label}
variant="outlined"
onchange={ontextchange}
style={{ margin: "1em", minheight: "1em", minwidth: "15em" }}
select
selectprops={{
native: true
}}
disabled={disabled}
>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</textfield>
) : (
<textfield
id={id}
value={val}
label={label}
variant="outlined"
onchange={ontextchange}
style={{ margin: "1em", minheight: "1em", minwidth: "15em" }}
disabled={disabled}
/>
);
};
the updated codesandbox
Source: stackoverflow.com
Related Query
- How can I update this JSON with TextFields?
- How to update specific value in a array of JSON values in React, can anyone please explain this
- How can I make this work with less code and more efficiently? - Mapping Json and rendering components conditionally
- How can i print JSON with console.log
- How can I update a json object inside of an array?
- How can I implement a real partial update with ReactJS?
- How can I access a local JSON file with Redux to use throughout my React app?
- React js useState hook. How to update state of a json object with an a array in it when a checkbox is clicked
- How can I test an action with jest if this action has thunk and axios?
- How can I divide this Object.values with the total?
- How can I format an excel file with empty rows to have nested arrays and match a JSON object that I need to render?
- How can I solve this error with Immer - "Uncaught (in promise) TypeError: Cannot perform 'get' on a proxy that has been revoked"
- How can I make this function shorter with ES6?
- How to update a function with useEffect (like componentDidUpdate) and use .map function to display from JSON file ReactJS
- How can I wrap JSON object with a parent object or field?
- How should I parse this json object in react with lifecycle method?
- How can I use this React library with React-Rails
- How can I access this json response object?
- How to make a custom hook with useState which can update multiple elements if state changes?
- How can I change this Navbar dropdown item to update from "Login" to "Logout" when a user logs in?
- How can i update context value with the state value
- How can I achieve something like this image with chart.js(react-chartjs-2)?
- How can I implement this countdown timer in React with hooks?
- How can I chain a state update and a call to refect API data with hooks?
- Uncaught (in promise) Error: Request failed with status code 400, How can I solve this error in React.js + Django App?
- How can I update a state inside an array of object with Redux?
- How to update a json file with express, axios and react?
- Using React, how can I update multiple elements with different values?
- How can I create a menu with my json info with REACT
- How can i fix this case in reactjs with redux?
More Query from same tag
- dispatch thunk return to component
- Same values for this.props, nextProp and nextState leads to bad rendering
- Filtering React js
- React delaying my state update by 1 iteration
- How do I mock "this" when writing a unit test for a React module?
- Check changes before routing in React / Next js
- Having a limit to the amount of words shown according to <div> height
- How to authenticate my user with React Material UI components?
- How to use custom hook (fetch) with typescript
- [GraphQL error]: Message: Unknown argument "email" on field "createUser" of type "rootMutation"., Location: [object Object], Path: undefined
- How to map React components but have 2 different sources of info
- React redirecting to 404 Route from id-based Route
- Where to call the method in react component?
- not sure on how to add a delete function to my mern app using API's
- Material UI: Remove up/down arrow dials from TextView
- How to add a dynamic row on click of button in a table?
- Generics error with forwardRef: Property 'ref' does not exist on type 'IntrinsicAttributes'
- Initial value in useState hook
- Why setState in useEffect in not updating to the ref.current value supplied to it?
- Is it possible to get a React property outside of React?
- ReactJS onClick event which disable clicking second time on <a> tag
- Reactjs: Difficulty in applying CSS even after increasing Specificity
- When passing component as prop i get TS2604 error when i try and render it
- How can I dispatch a state change to redux when calling it from a function inside the component?
- Return infinite data from the dribbble API
- Connecting reactjs with nodejs
- How can I use Navbar link in Reactjs?
- How to get value of a component to another component
- How can I change my menu state to hide or show my menu in react?
- Type error while using antd Button with TypeScript