TextField is a wrapper component.

You can pass the ref to the native input like this:

import React, { Component, createRef } from 'react';

import TextField from '@material-ui/core/TextField';

export default class App extends Component {
  ref = createRef();

  render() {
    return (
      <div className="App">
        <TextField inputProps={{ ref: this.ref }} />


You must initiate state values inside the constructor.

Also change this line as inputRef={this.newActivity} instead of inputRef={(el)=>this.newActivity =el}. Because you already create ref using createRef no need to create again.

class Activity extends Component {

constructor(props) {
    this.state = {
    this.callAPI = this.callAPI.bind(this);
    this.newActivity = React.createRef();

callAPI() {
    fetch("http://localhost:5000/activities", {
        method: 'POST',
        body: JSON.stringify({
            newName: this.newActivity.current,
            oldName: this.state.activity
        .then(function (response) {
            return response.json()

render() {
    return (
            <Grid justify="center" container spacing={(2, 10)} aligncontent="center">
                <Grid item xs={8} >
                        {/*Trying to get the input here so that I can put it into my POST request*/}
                        <TextField inputRef={this.newActivity} type="activity" id="standard-basic" label="Standard" defaultValue={this.state.activity} />
                <Grid item xs={2}>
                    <Button onClick={this.callAPI} variant="contained" startIcon={<UpdateIcon />} style={buttonStyle} >Uppdatera</Button>
                <Grid item xs={2}>
                    <Button variant="contained" startIcon={<DeleteIcon />} style={buttonStyle} >Ta Bort</Button>


Related Query

More Query from same tag