score:0
Try with this:
import React from 'react';
import PropTypes from 'prop-types';
class EditTodoComponent extends React.Component {
constructor() {
super();
this.state = {
text: this.props.todo.text
};
this.defaultText = "default string";
}
onChange(e) {
this.setState({ text: e.target.value });
}
render() {
return(
<div>
<form>
<input type="text" value={this.state.text || this.defaultText} onChange={(e) => this.onChange(e)}/>
</form>
</div>
);
}
}
You were missing the constructor definition and the onChange was wrongli bound so that this
was not the component itself
score:1
Try this
import React from 'react';
import PropTypes from 'prop-types';
class EditTodoComponent extends React.Component {
constructor() {
super();
this.state = {
text: this.props.todo.text
}
this.defaultText = "default string";
}
onChange(e) {
this.setState({ text: e.target.value });
}
render() {
return(
<div>
<form>
<input
type="text"
value= {this.state.text
? this.defaultText
: this.state.text
}
onChange={this.onChange}/>
</form>
</div>
);
}
}
EditTodoComponent.propTypes = {
todo: PropTypes.shape({
id: PropTypes.number.isRequired,
completed: PropTypes.bool.isRequired,
text: PropTypes.string.isRequired
}).isRequired,
visible: PropTypes.bool.isRequired
}
export default EditTodoComponent
Check this.state.text
value, if it's null then use defaultValue
instead.
Source: stackoverflow.com
Related Query
- How to change the input value in a form with react and redux?
- How can I change form input value in React and Redux?
- How to submit a form with radio buttons in react and increment the state by one based on the value submitted?
- How to reset the react form input value (which is tied to a state) with a button?
- How can I change the value of an object in react based on form data input by the user?
- Why can't I change my input value in React even with the onChange listener
- Why can't I change my input value in React even with the onChange listener
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- How to set defaultValue, value={this.props.value}, and update the value of a text input with React?
- How to take input value from submit form and store in redux store variable?
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- How do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?
- React warning: contains an input of type hidden with value and default value - how to fix?
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- I am trying to animate an object with css in react and change the animation (timing) dynamically, how can I set the style after animation end?
- In React with Formik how can I build a search bar that will detect input value to render the buttons?
- React - Show an array value at a time and change with the click
- How to get the value of Antd Form with React Hooks?
- How to update a useState which has an array, inside this array I have objects this objects will update when the input value will change in react js
- How can I change the value of an object in an array in react redux when the action is called?
- How to change the value of the key form an object with the value of some another key of the same object?
- How can i store the value of a React input element and use it in some other elements
- How to change the checkbox selection and get the updated id's of checkbox items in form submit in React Component?
- how to change both input type and max value in react input tag during onfocus?
- How can i can change the value of a variable with if/else to return certain div in react
- How to change the value depending on one input when another input is checked? React hooks
- How can I get the value of an input field and use it in URL in React
- How do I fire a blur event to change the value of a an input element with Enzyme?
- How can I change the state of my sidebar in my React with Redux ASP.NET Core application?
- Meteor + React how to set the value of a lot of input elements and modify them after
More Query from same tag
- React: Handling focus using array of useRef
- How to make flex-direction: column; properly. My code doesn't work
- How to change the height of an accordion in react?
- React Uncaught TypeError: transcript.Transcription.map is not a function
- JS function result not rendering
- React-router urls not working when manually typing in browser
- How to make the Value in the inputText dynamic?
- Converting compoenentWillReceiveProps to getDerivedStateFromProps and my conversion isn't working
- How to use url params in separate component
- How to Arrange Items using React BootStrap
- Adding a <strong> Tag to the typed letters in Autocomplete field in React
- Can I export data to another react component?
- How to update the prop state in ReactJs when an event on the Server has happened
- How can I toggle a class and change the CSS in Nextjs?
- React Test prop component is not called with async
- redux-form (version 6.4.3) does not display errors
- convert react class-based to functional component
- Cant test copy from 'copy-to-clipboard' with sinon
- Getting map data using React from firestore
- Can anyone help me move data from an Axios JSON response to a plot points on a Chart js line chart?
- How do I render images on the webpage in react from an array?
- Push to state array React with TypeScript
- How do I avoid using separate _PENDING _FULFILLED and _REJECTED actions with redux thunk?
- Online Example (CSS of a Cube) inside React
- How to group/split array of objects by weeks with start and end date
- How do I unmount only one of the children in this.props.children
- Listen to 'invalid' event on a React component
- React How can I receive the 3h rain foreact from openweathermap (Identifier directly after number error)
- react firebase cannot import db from firebase-config.js
- Is there something like React.Fragment in Vue?