score:1

Accepted answer

i think you are missing the object destructuring of props in the functional component

const profileform = ({user, markers, onchange, oncheckboxchange}) => {
 // its important because functional component takes a single argument. but with es6 you can always destructure it

 return (
    <div>
      <textinput name={'firstname'} label={'first name: '} value={user.firstname} onchange={onchange}/>
      <textinput name={'lastname'} label={'last name: '} value={user.lastname} onchange={onchange}/>
      <textinput name={'phone'} label={'phone: '} value={user.phone} onchange={onchange}/>
      <div>
        as who you want to be presented on a map:
        <checkboxinput name={"type"} label={"driver"} value={constants.type_driver} checked={markers.driver} onchange={oncheckboxchange}/>
        <checkboxinput name={"type"} label={"passenger"} value={constants.type_passenger} checked={markers.passenger} onchange={oncheckboxchange}/>
      </div>
    </div>
  );
};

or you can try with single argument also

const profileform = (props) => {
  return (
    <div>
      <textinput name={'firstname'} label={'first name: '} value={props.user.firstname} onchange={props.onchange}/>
      <textinput name={'lastname'} label={'last name: '} value={props.user.lastname} onchange={props.onchange}/>
      <textinput name={'phone'} label={'phone: '} value={props.user.phone} onchange={props.onchange}/>
      <div>
        as who you want to be presented on a map:
        <checkboxinput name={"type"} label={"driver"} value={constants.type_driver} checked={props.markers.driver} onchange={props.oncheckboxchange}/>
        <checkboxinput name={"type"} label={"passenger"} value={constants.type_passenger} checked={props.markers.passenger} onchange={props.oncheckboxchange}/>
      </div>
    </div>
  );
};

your class component is working because you are passing the correct props there.

score:1

dumb "function" components take in a single argument of props. they do not take in a series of arguments. i mean, think about it.... how would this:

<profileform user={user} onchange={onchange}/>

be able to be parsed into this:

profileform(user, undefined, onchange, undefined)

it can't!

so instead, it calls as such:

profileform({user:user, onchange:onchange})

and you can reference in the same fashion in your function definition;

const profileform = ({user, markers, onchange, oncheckboxchange}) => {

Related Query

More Query from same tag