How Get RId Of This Error

React
1

This is my code : import React from 'react';import './App.css';class TypeStuffIn extends - Pastebin.com

Trying to get rid of the following error. : Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

I am new to React and want to just dynamically update the input box to the right with whatever is being typed on the left.

Thanks

2

Hi,

This is how I would approach this :

import React, {useState} from 'react';

function DuplicateInput({greet}){
    const [myInput, setMyInput] = useState('');
    const [otherBox, setOtherBox] = useState('');

    // Or like this to avoid creating a new variable
    // const handleChange = ({target: {value: val}}) => {
    const handleChange = ({target}) => {
        let val = target.value;
        console.log(val);
        setMyInput(val);
        setOtherBox(val);
    }

 return (<div> 
        <input type="text" 
            name="myInput" 
            placeholder="Type text here" 
            value={myInput}
            onChange={handleChange}
        />
        <input type="text"
            name="otherBox"
            placeholder="Text shall be duplicated here"
            value={myInput}
            //value={otherBox} // this works too
        />
    </div>);  
}

export default DuplicateInput;

I don’t see why you are getting this error. What version of React are you using? Because my code does not produce such message.

3

as the warning says itself

Case 1 (Input Field is readOnly)

<input type="text" 
    name="myInput" 
    placeholder="Type text here" 
    defaultValue={myDefaultValue}
    readOnly
/>

Case 2 (Input Field mutable)
if you are using value then it’s necessary to pass the onChange handler

<input type="text" 
    name="myInput" 
    placeholder="Type text here" 
    value={myInput}
    onChange={handleChange}
/>