Search code examples
reactjsuse-stateobject-literal

How to show default values for text with onChange input?

I have an object that I'm passing to a state variable:

const values = [
value1:'value1',
value2:'value2',
value3:'value3',
value4:'value4'
]

const [inputValues,setInputValues] = useState(values)

I am able to modify these values as well as display them e.g:

<Text>{inputValues.value1}</Text>
<Input value={inputValues.value1} onChange={onChange} name={value1}/>

The problem is when I'm resetting the values in the input to empty strings it will reset in the text as well, leaving it blank while the input values are changed. I currently have other state variables that will display the values separately for the text, but I don't see the point since I now have two values that does the same thing:

const [value1, setValue1] = useState()

How can I modify the input values without affecting the text fields?

Solution

  • You can't modify the inputValues without affecting the text fields, because both values are using the same variable, you are using the same state.

    ...

    This would be an option if your Text were to show the default value only

    const values = [
value1:'value1',
value2:'value2',
value3:'value3',
value4:'value4'
]

const [inputValues,setInputValues] = useState(values)
...
//this should be taken from your values, to be static. or from another state
<Text>{values.value1}</Text>
<Input value={inputValues.value1} onChange={onChange} name={value1}/>