CODEWITHSUNDEEP
reactjscreate-react-app
DGB
DGB

Reputation: 1342

How can I change the state submitting a form in React?

I am trying to update state when I submit my form. However when I submit the state shows date:HTMLInputElement

I'm planning on using the date submitted to display a picture from that day from NASA's api.

I'm new to React so i'm still trying to get my head around it.

But shouldn't the state of the date property show the date when I submit the form in the console?

class DisplayContent extends React.Component {
    constructor(props){
        super(props)

    this.state = {
        date: ''
    }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleSubmit(e){
        e.preventDefault()
        this.setState({ date: e.target.date })
    }
       handleChange(e){
        this.setState ({
              date: e.target.value
     })
    }   
    render(){
        return(
            <div className='container'>
            <h1>NASA Picture of the Day</h1>
            <h3>Enter a date and you'll see NASA's picture from that day</h3>
            <form onSubmit={this.handleSubmit}>
            (YYYY-MM-DD):
                <input 
                type='text'
                id='date'
                placeholder='input date'
                value={this.state.date}
                onChange={this.handleChange}
                />
                <button 
                type='submit'
                disabled={!this.state.date}
                >
                Submit
                </button>
            </form>
           </div>

Upvotes: 1

Views: 1679

Answers (4)

Wijitha
Wijitha

Reputation: 1389

You don't need to set the Date again in the state when submitting the form. Its already there in the state because you are already handling onChange event of the date input (If not you wont see the selected date in the text box in the first place).

So I guess you you just need to call the API in the form submit event and fetch required image. If you are getting an url you might want to store that in a state variable. If that's the case set the image url in the state within the submit.

this.setState({...this.state, imageUrl: 'http://your-url.com'});

Upvotes: 0

Nelson_Frank
Nelson_Frank

Reputation: 101

 class DisplayContent extends React.Component {

       state = {
           date: ''
          }
       handleSubmit =(e)=>{
            e.preventDefault()
            this.setState({ date: e.target[0].value })
        }
       handleChange=(e)=>{
        this.setState ({
              date: e.target.value
        })
      }   
       render(){
           return(
              <div className='container'>
              <h1>NASA Picture of the Day</h1>
              <h3>Enter a date and you'll see NASA's picture from that day</h3>
              <form onSubmit={this.handleSubmit}>
              (YYYY-MM-DD):
                <input 
                type='text'
                id='date'
                placeholder='input date'
                value={this.state.date}
                onChange={this.handleChange}
                />
                <button 
                type='submit'
                disabled={!this.state.date}
                >
                Submit
                </button>
            </form>
           </div>
    }
}

Upvotes: 0

Zeke Lu
Zeke Lu

Reputation: 7475

In the event handler handleSummit, e.target is the form, and e.target.date is the input element. That's why you see [object HTMLInputElement].

According to your description , I think this is what you want:

 handleSubmit(e) {
     e.preventDefault();
-    this.setState({date: e.target.date})
+    console.log(this.state.date);
 }

You want to read the date instead of changing the date in the form submit handler.

Upvotes: 0

freedev111
freedev111

Reputation: 132

handleSubmit(e) {
 this.setState({
   date: e.target[0].value
 });
}

Upvotes: 1

Related Questions