CODEWITHSUNDEEP
reactjsmaterial-ui
Jonathan Hindi
Jonathan Hindi

Reputation: 3

React Material Updating TextInput Value

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>
  );

Upvotes: 0

Views: 170

Answers (1)

angelo
angelo

Reputation: 2961

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
)

Upvotes: 1

Related Questions