React js Material Ui TextField default value doesn't change

Question

I want to change default value of TextField when state change but it doesn't work. I guess it is doesn't re-render.

 <TextField
     multiline={true}
     rows={15}
     disabled
     id="outlined-basic" label="" variant="outlined"
    defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>}

Answer 1

Default value is not meant to be changed with state.

You should set the value for reflecting the default value

<TextField
  multiline
  rows={15}
  disabled
  id="outlined-basic" 
  label="" 
  variant="outlined"
  defaultValue="Something that will stay there initially only"
  value={!isEn ? data.data[0].description : data.data[0].descriptionLocalization.en}
/>

Answer 2

There are two parts missing to your TextField component that is required to tie the input to state.

1. As user Mohammad Fasial said, the defaultValue prop is only for the default value the component will have. The correct prop you're looking for is value . State will need to equal value .
2. To listen for changes when the user inputs new information into the TextField input, you'll need to use the onChange prop. The onChange prop (on change listener) let's you provide a function as an argument to run when the input value changes. In this case we want to set onChange to run setExampleState to set the state to the value of the input field by using the event.target.value property.

 
function ExampleComponent(){
  const [exampleState, setExampleState]  = useState([]);
  ...

 return (
   <>
    <TextField
        multiline={true}
        rows={15}
        disabled
        id="outlined-basic" label="" variant="outlined"
        defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
        value={exampleState}
        onChange={(event) => setExampleState(event.target.value)}
    />
    <Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>
  </>
 );
}

To learn more about the different properties TextField has, you can look at the TextField API Documentation . There are also a lot of TextField code examples that can be expanded on the Material-UI site as well.

Answer 3

Update the key of Element or Container after Default value Change