score:3
when you update the display value of the inputs in state, you need to use this.setstate
to change the state data and cause a re-render with the new data. using input.key = value is not the correct way.
using state correctly
there are three things you should know about setstate().do not modify state directly
for example, this will not re-render a component:// wrong
this.state.comment = 'hello';
instead, use setstate():// correct
this.setstate({comment: 'hello'});
the only place where you can assign this.state is the constructor.
read more from facebook directly here
i would actually suggest a little bit of a restructure of your code though. it's not really encouraged to have components as part of your state values. i would suggest having your different inputs as data objects in your this.state.inputs, and loop through the data and build each of the displays that way in your render method. like this:
suppose you have one input in your this.state.inputs (and suppose your inputs is an object for key access):
inputs = {
1: {
selectedtime: 0:00,
selectedvalue: 2
}
}
in your render, do something like this:
render() {
let inputs = object.keys(this.state.inputs).map((key) => {
let input = this.state.inputs[key]
return (<selecttimeinput
key={key}
name={'option_' + key}
placeholder={this.props.placeholder}
options={this.props.options}
onchange={this.onchange.bind(this, key)}
timevalue={input.selectedtime}
selectvalue={input.selectedvalue}
/>)
)}
return (
<div>
<button classname="button" onclick={this.onaddclick}><i classname="fa fa-plus" /></button>
{ inputs }
</div>
);
}
notice how we're binding the key on the onchange, so that we know which input to update. now, in your onchange
function, you just set the correct input's value with setstate:
onchange(event, key) {
this.setstate({
inputs: immutable.fromjs(this.state.inputs).setin([`${key}`, 'selectedtime'], event.target.value).tojs()
// or
inputs: object.assign(this.state.inputs, object.assign(this.state.inputs[key], { timevalue: event.target.value }))
})
}
this isn't tested, but basically this immutable statement is going to make a copy of this.state.inputs and set the selectedtime value inside of the object that matches the key, to the event.target.value. state is updated now, a re-render is triggered, and when you loop through the inputs again in the render, you'll use the new time value as the timevalue
to your component.
again, with the object.assign edit, it isn't tested, but learn more [here]. 2 basically this statement is merging a new timevalue value in with the this.state.inputs[key] object, and then merging that new object in with the entire this.state.inputs object.
does this make sense?
score:0
i modified the onchange
in the multipledaytimeinput
:
onchange(event) {
const comparisonkey = event.target.name.substring(event.target.name.length - 1);
const input = this.getinputstate(comparisonkey);
input.selected = event.target.value;
input.display = this.rendertimeinput(input);
let spliceindex = -1;
for (let i = 0; i < this.state.inputs.length; i++) {
const matches = inputfilter(comparisonkey)(this.state.inputs[i]);
if (matches) {
spliceindex = i;
break;
}
}
if (spliceindex < 0) {
throw 'error updating inputs';
}
this.setstate({
inputs: [...this.state.inputs].splice(spliceindex, 1, input)
});
}
the key points are:
// re render the input
input.display = this.rendertimeinput(input);
// set the state by copying the inputs and interchanging the old input with the new input....
this.setstate({
inputs: [...this.state.inputs].splice(spliceindex, 1, input)
});
having thought about it though, input
is an object reference to the input in the this.state.inputs
so actually [...this.states.inputs]
would have been enough??
Source: stackoverflow.com
Related Query
- Dynamically created custom form components in react
- Setting custom props on a dynamically created React component
- Use dynamically created react components and fill with state values
- How to add animation in dynamically created react components
- Dynamically created React Components render as HTML even with capitalization
- Attaching an OnClick event to dynamically created React components
- Unable to dynamically render custom react components properly after fetching from backend
- Components not rendered when created dynamically with array.map in react
- React v4 routing for dynamically created components
- Remove newlines in svgs created with custom components in React
- Dynamically add child components in React
- React - Dynamically Import Components
- Using for loops and switch cases in React to dynamically render different components
- Custom mailchimp signup form in React
- Swiper React | How to create custom navigation/pagination components using React refs?
- React Hook Form: Submit a form with nested components or extract fields of nested components to submit
- Dynamically loading React components
- Rendering external HTML/React components dynamically in React
- React hook form v7 Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()
- How to create custom React Native components with child nodes
- React - Render a certain number of components dynamically
- Form created with React doesn't update the backing state object
- Rendering React components from json data dynamically
- Communication between two React form components with Redux
- How to add components to list dynamically in React with no redundant render?
- Validate dynamically generated form in react using redux-form and revalidate?
- Next.js: How to dynamically import external client-side only React components into Server-Side-Rendering apps developed?
- Dynamically create components in React
- Adding Disabled Attribute to dynamically created Button In React
- Testing React form components
More Query from same tag
- React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. props in useEffect have no data
- How to put data from json response in an array in reactjs
- How do I pass current index to react-image-lightbox?
- 'this' is not a function in code splitting
- React, Flux, State and Stores
- Dependency cycle issue when using Styled Components alongside compound component pattern
- Call two different components of react js on same html page
- React & ReactQuill: Call methods Inside the Custom Component from toolbar
- Graphql subscription not getting client-side variables
- Function inside render and class in reactjs
- React useState passed as props is not changing in child components
- React Redux dispatch is not a function
- How to use react router to achieve step by step navigation (like in a slideshow)?
- 'rotate' is not defined React.JS
- Cannot read property 'map' of undefined because reducer has problems
- How to fix "Expected to return a value in arrow function array-callback-return"?
- rendering react on server
- Mock local variable derived from redux store redux saga testing
- How can I using state instead of setTimeout?
- How to fetch data from a custom React hook (API) with onClick and display it in a Div using TypeScript?
- React onClick event on component
- React+Laravel 5.8.33 +Axios: errors when registering user with an axios.post request; clarififying the code problem
- Determining state type in context with typescript
- React : How to handle Select condition
- NodeJs: Serve image, stored on AWS S3, to client img tag
- Button in React Form needs take size of parent
- Replace text with a span
- Styling background (fill) with ChartJs and React
- How do I change MUI's select background color?
- error TS2305: Module '"react"' has no exported member 'Node'