React Material Updating TextInput Value

Question

So i'm trying basically to have a input field which completes a link and refers the user to it. However when I click on the button I get a page to open properly but with a 'undefined' at the end as if the input field was not updated. Any insight would be appreciated :)

    let workerID;
    const workerLink = "html link";
    const workerSearch = workerLink + workerID

    return (
    <div className={classes.root}>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
              <h1><DashboardOutlinedIcon /> Job Card</h1>
              <Moment className={classes.time}interval={1000} format="HH:mm:ss DD/MM/YYYY" />
          </Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper className={classes.paper}>
              <h3><AccessibilityNewRoundedIcon /> NameGet</h3>
            <TextField id="standard-basic" label="Name:" variant="outlined" />
          </Paper>
        </Grid>
        <Grid item xs={4}>
            <Paper className={classes.paper}>
                <h3>Fetch</h3>
              <TextField id="standard-basic" label="ID:" variant="outlined" value={workerID}/>
                <a href={workerSearch} target="_blank" rel="noreferrer"><Button variant="contained" color="primary" className={classes.formstyle} value={workerID}>Search</Button></a><SearchRoundedIcon />
            </Paper>
        </Grid>
      </Grid>
    </div>
  );

angelo · Accepted Answer · 2020-11-09 13:12:25Z

1

You should add a onChange attribute to the input(TextField in MaterialUI) and you are better using state in React instead of variables because if the variable updates again react will not update the UI with respect to the value of variable but it will update in case of state.

import React, {useState} from 'react'

// Your Rest of code

const [workerID, setWorkerID] = useState('')//initial value of workerID is empty string

   return(
    //Rest of Code

    <TextField id="standard-basic" label="ID:" variant="outlined" value={workerID} onChange={event=>setWorkerID(event.target.value)}/>

    //Rest of Code
)

answered Nov 9, 2020 at 13:12

angelo

2,9613 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Material Updating TextInput Value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related