Pass form input value to method in react

Question

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.org/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?

go through uncontrolled components from react official doc first. reactjs.org/docs/uncontrolled-components.html — user4556641
– user4556641, Commented Jul 23, 2019 at 14:57
I recommend using controlled components in this case, you can then define state for your component 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 component and have access to the state object there. — M0nst3R
– M0nst3R, Commented Jul 23, 2019 at 15:08

ravibagul91 · Accepted Answer · 2019-07-23 15:11:19Z

You are using Uncontrolled Components.

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

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

Mauro Stepanoski · Accepted Answer · 2019-07-23 15:19:08Z

You can use a controlled component: https://reactjs.org/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.org/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.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Collectives™ on Stack Overflow

Pass form input value to method in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related