[Solved]-Unable to get the input from a textfield in React-Reactjs

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 }} />
      </div>
    );
  }
}

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) {
    super(props);
    this.state = {
        activity: this.props.data.name
    }
    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 (
        <React.Fragment>
            <Grid justify="center" container spacing={(2, 10)} aligncontent="center">
                <Grid item xs={8} >
                    <Paper>
                        {/*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} />
                    </Paper>
                </Grid>
                <Grid item xs={2}>
                    <Button onClick={this.callAPI} variant="contained" startIcon={<UpdateIcon />} style={buttonStyle} >Uppdatera</Button>
                </Grid>
                <Grid item xs={2}>
                    <Button variant="contained" startIcon={<DeleteIcon />} style={buttonStyle} >Ta Bort</Button>
                </Grid>

            </Grid>
        </React.Fragment>
    );
}