CODEWITHSUNDEEP
javascriptreactjsecmascript-6
user11037643
user11037643

Reputation:

React : TypeError: Cannot read property 'value' of undefined

I am getting value from form in ReactJS but in meantime when I click on submit button it give me error TypeError: Cannot read property 'value' of undefined . Could someone Please check what problem I may face .

Thanks

import React, { Component } from 'react'
import { getFunName } from './helpers';

class StorePicker extends Component {
  myInput=React.createRef();

  goToStore=event=> {
    // 1- Stopping form from submitting
    event.preventDefault();

    // 2 - Getting value from Input
    const storeName = this.myInput.value.value ;

    // 3 - Change the page to /store/whatever-you-entered
    this.props.history.push(`/store/${storeName}`)
  }


  render() {
    return (
     <form className="store-selector" onSubmit={this.goToStore}>
     <h2>Please Enter Enter a Store</h2>
     <input type="text" required placeholder="Store Name" ref={this.myInput}  defaultValue={getFunName()}/>
     <button type="submit">Visit Store</button>
     </form>
    )
  }
}

export default StorePicker;

Upvotes: 3

Views: 936

Answers (2)

santosh devnath
santosh devnath

Reputation: 172

Complete code for this 

import React, {Fragment} from 'react';
import {getFunName} from "../helpers";

class StorePicker extends React.Component{

myInput = React.createRef();

goToStore = event =>{
    //1. Stop the from submitting
     event.preventDefault();

     //2. get the text from that input
     const storeName = this.myInput.current.value;

     //3. change the page to /store/store-name
     this.props.history.push(`/store/${storeName}`);
}

render(){
    return(
        <form className="store-selector" onSubmit={this.goToStore}>
            <h2>Please Enter a Store</h2>
            <input type="text" ref={this.myInput} required placeholder="Store Name"/>
            <button type="submit">Visit Store</button>
        </form>
    )
}
}

export default StorePicker;

Upvotes: 0

rrd
rrd

Reputation: 5957

If you're using refs it should be this:

const storeName = this.myInput.current.value;

Upvotes: 4

Related Questions