I am struggling with a situation where I need to grab the value of an input field to make an API call.

So What I have is this:

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

const fetchWeather = function (e) {
    e.preventDefault();
    axios.get('.5/weather?q=Zeist&appid=MYID')
    .then(res => {
        console.log(res.data); 
    });
    console.log();
}

export default class App extends Component {
    render() {
        return (
            <div>
                <form onSubmit = {fetchWeather}>
                    <input type = 'text' placeholder = 'Your city' ref="city"></input>
                    <input type = 'submit' placeholder='Submit' value = 'Submit'></input>
                </form>
            </div>
        );
    }
}

A form that runs a function on submit, I used preventDefault to stop the page from loading.

The function runs and the page doesn't reload. Now I'd like to grab the text from the input field and log it in that function. The reason why I want this is so I can use it in my API call as a query parameter. I tried many things. I tried logging e to see what is inside. It's a very big object and I couldn't find the value I'm looking for. I tried using ref, this didn't work either. Any idea how I could solve this issue?

I am struggling with a situation where I need to grab the value of an input field to make an API call.

So What I have is this:

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

const fetchWeather = function (e) {
    e.preventDefault();
    axios.get('https://api.openweathermap/data/2.5/weather?q=Zeist&appid=MYID')
    .then(res => {
        console.log(res.data); 
    });
    console.log();
}

export default class App extends Component {
    render() {
        return (
            <div>
                <form onSubmit = {fetchWeather}>
                    <input type = 'text' placeholder = 'Your city' ref="city"></input>
                    <input type = 'submit' placeholder='Submit' value = 'Submit'></input>
                </form>
            </div>
        );
    }
}

A form that runs a function on submit, I used preventDefault to stop the page from loading.

The function runs and the page doesn't reload. Now I'd like to grab the text from the input field and log it in that function. The reason why I want this is so I can use it in my API call as a query parameter. I tried many things. I tried logging e to see what is inside. It's a very big object and I couldn't find the value I'm looking for. I tried using ref, this didn't work either. Any idea how I could solve this issue?

• javascript
• reactjs

• 1 go through uncontrolled ponents from react official doc first. reactjs/docs/uncontrolled-ponents.html – user4556641 Commented Jul 23, 2019 at 14:57
• 1 I remend using controlled ponents in this case, you can then define state for your ponent and store the value of your input using value= and onChange= on the ipunt. That way, you'll be able to define fetchWeather as a method inside your ponent and have access to the state object there. – M0nst3R Commented Jul 23, 2019 at 15:08

2 Answers 2

You are using Uncontrolled Components.

You need to move your fetchWeather function inside of your ponent,

export default class App extends Component {
    fetchWeather = (e) => {
      e.preventDefault();
      console.log(this.refs.city.value)//You will get vlue here
      axios.get('https://api.openweathermap/data/2.5/weather?q=Zeist&appid=MYID')
      .then(res => {
        console.log(res.data); 
      });
      console.log();
    }
    render() {
        return (
            <div>
                <form onSubmit = {this.fetchWeather}> //refer your function using `this`
                    <input type = 'text' placeholder = 'Your city' ref="city"></input>
                    <input type = 'submit' placeholder='Submit' value = 'Submit'></input>
                </form>
            </div>
        );
    }
}

Better way is, using state. This is called Controlled Components.

export default class App extends Component {
    state={
       city: ''
    }
    handleChange = (e) => {
       this.setState({[e.target.name]:e.target.value})
    }
    fetchWeather = (e) => {
      e.preventDefault();
      console.log(this.state.city)//You will get vlue here
      axios.get('https://api.openweathermap/data/2.5/weather?q=Zeist&appid=MYID')
      .then(res => {
        console.log(res.data); 
      });
      console.log();
    }
    render() {
        return (
            <div>
                <form onSubmit = {this.fetchWeather}> //refer your function using `this`
                    <input type = 'text' placeholder = 'Your city' name="city" value={this.state.city} onChange={this.handleChange} ></input>
                    <input type = 'submit' placeholder='Submit' value = 'Submit'></input>
                </form>
            </div>
        );
    }
}

You can use a controlled ponent: https://reactjs/docs/forms.html.

I simulated the fetch operation in the snippet.

const fetchWeather = function (data) {
  // simulating fetch
  setTimeout(function() {
    console.log('GETTING DATA ' + JSON.stringify(data))
  }, 500)
}

// Controlled Component: https://reactjs/docs/forms.html
class App extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      city: ''
    }

    this._handleInputChange = this._handleInputChange.bind(this)
    this._handleSubmit = this._handleSubmit.bind(this)
  }

  _handleInputChange (event) {
    const { value, name } = event.target

    this.setState({
      [name]: value
    })
  }
  
  _handleSubmit (event) {
    event.preventDefault()
    fetchWeather(this.state)
  }

  render() {
    const { city } = this.state
    
    return (
      <div>
        <form onSubmit={this._handleSubmit}>
          <input
            type='text'
            name='city'
            placeholder='Your city'
            value={city}
            onChange={this._handleInputChange}
          />
          <input type='submit' placeholder='Submit' value='Submit' />
        </form>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
)

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>