Unable to change text box value in React JS - reactjs

Question

Hi I am working on React JS application. I have assigned default value to textbox on page load. User should be allowed to change this but user is not able to edit the value in textbox. Below is my code.
const EditStyleFormComponent = ({
submitting,
invalid,
}) => (
<form className={className} onSubmit={handleSubmit}>
<h2>LSPL (Low Stock Presentation Level)</h2>
<Line />
<InputGroup>
<TextField value="Current" label="LSPL Manual" isEditable="true" />
</InputGroup>
</form>
);
Below is my TextField.js
const TextField = ({
className,
label,
description,
state,
errorMessage,
isEditable,
spaceAtBottom, // Not used, but we don't want it in otherProps
...otherProps
}) => {
const inputId = _.uniqueId();
return (
<div className={className}>
{label &&
<label htmlFor={inputId}>{label}</label>
}
<div className="input-group" id={isEditable ? 'editable' : 'readonly'}>
<input
id={inputId}
readOnly={!isEditable}
{...otherProps}
/>
{getStatusIcon(state)}
{errorMessage &&
<Error>{errorMessage}</Error>
}
{description &&
<Description>{description}</Description>
}
</div>
</div>
);
};
Can someone help me to fix this issue? Any help would be appreciated. Thanks

Answer 1

Using Uncontrolled input, you may use defaultValue
const TextField = ({
className,
label,
description,
state,
errorMessage,
isEditable,
spaceAtBottom, // Not used, but we don't want it in otherProps
...otherProps
}) => {
const inputId = 1;
return (
<div>
{label &&
<label htmlFor={inputId}>{label}</label>
}
<div className="input-group" id={isEditable ? 'editable' : 'readonly'}>
<input
id={inputId}
readOnly={!isEditable}
{...otherProps}
/>
{errorMessage &&
<Error>{errorMessage}</Error>
}
{description &&
<Description>{description}</Description>
}
</div>
</div>
);
};
const EditStyleFormComponent = ({
submitting,
invalid,
}) => (
<form>
<h2>LSPL (Low Stock Presentation Level)</h2>
<TextField defaultValue="Current" label="LSPL Manual" isEditable="true" />
</form>
);
class Hello extends React.Component {
render() {
return <div><EditStyleFormComponent/></div>;
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
See the fiddle here https://jsfiddle.net/0f6n85ym/
Alternatively you can also do it in controlled input.
const TextField = ({
className,
label,
description,
state,
errorMessage,
isEditable,
spaceAtBottom, // Not used, but we don't want it in otherProps
...otherProps
}) => {
const inputId = 1;
return (
<div>
{label &&
<label htmlFor={inputId}>{label}</label>
}
<div className="input-group" id={isEditable ? 'editable' : 'readonly'}>
<input
id={inputId}
readOnly={!isEditable}
{...otherProps}
/>
{errorMessage &&
<Error>{errorMessage}</Error>
}
{description &&
<Description>{description}</Description>
}
</div>
</div>
);
};
const EditStyleFormComponent = ({
submitting,
invalid,
value,
onChange
}) => (
<form>
<h2>LSPL (Low Stock Presentation Level)</h2>
<TextField value={value} onChange={onChange} label="LSPL Manual" isEditable="true" />
</form>
);
class Hello extends React.Component {
constructor(props){
super(props);
this.state = {
name: 'Current'
}
}
onChange = (e)=>{
this.setState({name: e.target.value});
}
render() {
return <div><EditStyleFormComponent value={this.state.name} onChange={this.onChange}/></div>;
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
See the fiddle here
https://jsfiddle.net/bshumpy0/

Answer 2

You can use logical OR operator to set defaultValue if value is not provided(if you use controlled input)
Like that:
class App extends Component {
constructor() {
super();
this.state = {
value: ''
};
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<div>
<TextField value={this.state.value} defaultValue='213' onChange={this.handleChange} />
</div>
);
}
}
And in TextField component:
<input type='text' value={value || defaultValue} onChange={onChange}/ >
Full example - https://stackblitz.com/edit/react-4daxck