How to alert a Selected Record using Reactjs

Question

Am trying to alert an email records each time a particular Email is selected using reactjs. To this effect, I have created Reactjs function.

The issue is that it displays error:

Cannot read property email of undefined at fetchEmail

each time I tried to select a particular email.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />

</head>
<div id="app"></div>
<script type="text/babel">
var MainBox  = React.createClass({
    render:function(){
        return(
            <App/>
        );
    }
});


class App extends React.Component {
  constructor(){
    super() 
      this.state = {
 //isLoading: true,
        //data: []
      }

  }
  componentDidMount() {

  }

fetchEmail(){
//this.email = '';
alert(this.email);

}


  render() {


    return (
<div id='container'>

<select name="this.email" id="this.email" value={this.email} onChange={this.fetchEmail} >

  <option value=''>Select Email</option>
                           <option value='tony@gmail.com'>Tony Email</option>
                           <option value='mich@gmail.com'>Michael Email</option>
                           <option value='frank@gmail.com'>Frank Email</option>
 </select>

  </div>

    )
  }
}


ReactDOM.render(
    <MainBox />,
    document.querySelector("#app")
);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>

Alexander Staroselsky · Accepted Answer · 2018-11-13T05:04:02.107

You can retrieve the changed email string value from the <select> from the event object passed via onChange() to fetchEmail(). Add an argument to fetchEmail() to capture that passed event. You can retrieve the value of the <select> by targeting target.value of that event object. This is explained and demonstrated well in the official documentation on React Forms:

fetchEmail(e) {
  console.log(e.target.value);
}

It's somewhat unclear what you are attempting to do, but it looks like you are attempting to store a value for email on your component, update it when a change event happens on <select>, and use that value in some way. In React you can do this through state. You will need to make a few changes. This including adding an email property to your state. Updating the value property on the <select> to use this.state.email instead of this.email. Also you would use setState() to update the component's local state values. In this case updating email to match the e.target.value. Finally you could then access this email value using this.state.email instead of this.email.

Here is how the revised component could look:

class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: false,
      email: ''
    };

    this.fetchEmail = this.fetchEmail.bind(this);
  }

  fetchEmail(e) {
    console.log(e.target.value);
    this.setState({ email: e.target.value });
    // do no attempt to do console.log(this.state.email) right here, it will not be updated right away, see https://stackoverflow.com/questions/41278385/setstate-doesnt-update-the-state-immediately
  }

  render() {
    return (
      <div>
        <p>{this.state.email}</p>
        <select name="email" id="email" value={this.state.email} onChange={this.fetchEmail} >
          <option value=''>Select Email</option>
          <option value='tony@gmail.com'>Tony Email</option>
          <option value='mich@gmail.com'>Michael Email</option>
          <option value='frank@gmail.com'>Frank Email</option>
        </select>
      </div>
    );
  }
}

Here is an example in action.

Hopefully that helps!

Ashish Kirodian · Answer 2 · 2018-11-13T05:08:39.127

Try doing this:

this.fetchEmail = this.fetchEmail.bind(this);

at the constructor.

If you are directly trying to alert the mail without using the internal state, you can follow this piece of code.

    class App extends React.Component {
    constructor() {
        super();
        this.state = {
            email: ''
        };
        this.fetchEmail = this.fetchEmail.bind(this);
    }
    render() {
        return (
            <div>
                <select name="this.email" id="this.email" value={this.state.email} onChange={this.fetchEmail} >

                    <option value=''>Select Email</option>
                    <option value='tony@gmail.com'>Tony Email</option>
                    <option value='mich@gmail.com'>Michael Email</option>
                    <option value='frank@gmail.com'>Frank Email</option>
                </select>
            </div>
        );
    }
    fetchEmail(e) {
        this.setState({email: e.currentTarget.value});
        alert(e.currentTarget.value);
    }
}

How to alert a Selected Record using Reactjs

2 Answers2