Arrow function into "ordinary" function expression in react component

Question

I want to change the arrow style function (at onChange) in this react component into an ordinary function. I'm a beginner and for me it is helpful to see both versions side by side since I have a hard time getting the hang for the new arrow function syntax.

It should be possible but how would the could below look like using "ordinary" functions?

import React from "react";

function Input1(props) {
  //console.log(props)
  return (
    <div>
      <input
        onChange={event => props.handleChange("email", event.target.value)}
      />
    </div>
  );
}

export default Input1;

function (event) { return props.handleChange("email", event.target.value); } ? — VLAZ
– VLAZ, Commented Sep 25, 2019 at 13:43
If you just want a multi-line function, just using event => { /* multi-line of code here */ } would work. — Emile Bergeron
– Emile Bergeron, Commented Sep 25, 2019 at 14:12

Foyarash · Accepted Answer · 2019-09-25 13:44:33Z

5

import React from "react";

function Input1(props) {
  //console.log(props)

  function onChange(event) {
    props.handleChange("email", event.target.value)
  }

  return (
    <div>
      <input
        onChange={onChange}
      />
    </div>
  );
}

export default Input1;

answered Sep 25, 2019 at 13:44

Foyarash

4692 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

silencedogood · Accepted Answer · 2019-09-25 13:43:12Z

1

 <div>
  <input
    onChange={function(event) {
          props.handleChange("email", event.target.value)
         }
   }
  />
</div>

answered Sep 25, 2019 at 13:43

silencedogood

3,3291 gold badge16 silver badges38 bronze badges

Comments

dougajmcdonald · Accepted Answer · 2019-09-25 13:45:53Z

1

import React from "react";

function Input1(props) {

  function changeHandler(event) {
     props.handleChange("email", event.target.value)
  }

  //console.log(props)
  return (
    <div>
      <input
        onChange={changeHandler}
      />
    </div>
  );
}

export default Input1;

answered Sep 25, 2019 at 13:45

dougajmcdonald

20.2k12 gold badges61 silver badges100 bronze badges

Comments

govardhan n · Accepted Answer · 2019-09-25 14:09:32Z

-1

import React from "react";

class Input1 extends React.Component {
 constructor(props) {
    super(props);
    //need to bind in case of using function decleration
    this.handleChange = this.handleChange.bind(this);
  }

 handleChange(event){
   props.handleChange("email", event.target.value);
  }

 render() {
   return (
    <div>
      <input
        onChange={this.handleChange}
      />
    </div>
   )
 }

}

answered Sep 25, 2019 at 14:09

govardhan n

12 bronze badges

Collectives™ on Stack Overflow

Arrow function into "ordinary" function expression in react component

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related