How to display data from html response body on textfield or textArea in material UI reactjs?

Question

I have a form. On clicking the 'Evaluate' button, I send a post request. The response of this request is JSON, which I need to display in textField named Output. How to display data in 'Output' textField? I just need to display data(which is json in this case) to the text field.

My text field looks like this:

const MyTextField = ({select, values, nullable, min, max, helpertext, ...props}) => {

    const [field, meta] = useField(props);

    return (
            <TextField
                select={!!select}
                variant="outlined"
                margin="dense"
                //{...field}
                //defaultValue={meta.initialValue}
                value={field.value}
                error={meta.touched && meta.error}
                helperText={(meta.touched && meta.error) ? meta.error : helpertext}
                onChange={field.onChange}
                onBlur={field.onBlur}
                InputProps={{inputProps: {min: min, max: max}}}
                {...props}
            >
            {
                    values && nullable && values instanceof Array && <MenuItem ><em>None</em></MenuItem>
                }
                {
                    values && values instanceof Array && values.map((value, index) => {
                        return <MenuItem key={value} value={value}>{value}</MenuItem>
                    })
            }
            </TextField>
    );
};

and form looks like this

    return (
      <Container fluid className="main-content-container px-4">
      <Row noGutters className="page-header py-4">
      <PageTitle sm="12" title="Transformer Tester Tool" subtitle="" className="text-center"/>
      </Row>
      <Paper id="connPageRoot" className={classes.testerRoot}>
      <Formik onSubmit={submitEvaluate} initialValues={request}>
      <Form>
      <div>
      <MyTextField
          variant="outlined"
          margin="dense"
          id="json2JsonTransformationConfigDto.template"
          name="json2JsonTransformationConfigDto.template"
          label="JSLT template"
          multiline={true}
          rowsMax={4}
          fullWidth={true}/>
      </div>
      <div>
          <MyTextField
            variant="outlined"
            margin="dense"
            id="inputs.0"
            name="inputs.0"
            label="Json payload to be tested"
            multiline={true}
            rowsMax={4}
            fullWidth={true}
          />
          </div>
  <div className={classes.connPageButton}>
      <Button type={"submit"} color="primary" variant="contained">Evaluate</Button> </div>
        <div>
            <MyTextField
            variant="outlined"
            margin="dense"
            id="outputs.0"
            name="outputs.0"
            label="Output"
            value={result}
            multiline={true}
            rowsMax={4}
            fullWidth={true}
            />
      </div>
  </Form>
      </Formik>
      </Paper>
      </Container>
);

question from:https://stackoverflow.com/questions/65880504/how-to-display-data-from-html-response-body-on-textfield-or-textarea-in-material

Answer 1

Waitting for answers