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}) => {
Source: stackoverflow.com
Related Query
- Different props state for smart and dumb component
- How to declare different state and props for subclasses on react with typescript
- React.render in TypeScript for component with both props and state
- showing a different component on state change and for loop React js
- Is there any better approach for change component by using state and props to render?
- Why does not the background color get applied from props using state for a styled component div using react and typescript?
- React & Jest, how to test changing state and checking for another component
- How to set React component state and props from browser
- React shouldComponentUpdate() is called even when props or state for that component did not change
- Can we pass setState as props from one component to other and change parent state from child component in React?
- Access props and state of current component in React JS within an event handler
- Returning React component where props and state are mixed together
- Taking React State (object of objects(example inside)) and getting an array of objects to map() for component rendering
- What is the proper way to handle prop-types for a component that uses object destructing and object rest...spread to collect props
- Is setting a value outside of both state and props in a React component an anti-pattern?
- Unable to pass props from parent to child and save it in state of child component
- How to set a loading state for react component while sorting and filtering data?
- Update state on Parent component from input in Child using props and useState Hook
- Typescript reducer initial state and option argument for react component
- Cannot render Component passing React state to props for another Component
- Should I mount using beforeEach() and set props for each test or mount a specific component at the start of each test? (using Enzyme, Chai and Mocha)
- Passing props and state to child component
- concise and readable syntax for props in a react component in typescript
- Syntactic Sugar for passing React props with the same key and value into component
- How to render a component when state and props are changed?
- Set state in React component from props and update when props change?
- React-redux state and props updated but component not rerendering
- Can't use state value as props for child component
- Using Props And State To Pass Value Of Select Box To Child Component React.JS
- how does react props merge state passed from parent component and redux store
More Query from same tag
- React state is out of sync between render method and what is actually displayed on page
- How to display Content in Modal in reactjs?
- How do I make the bar width on Chartist.js responsive
- React hooks - remove from react-router location state when we refresh page
- SetState not updating the value in react js functional component
- ReactJS rendering image from array
- Material Table can not update
- conditionally set width of modal depending on props passed in
- Is there any way to play a sound for a certain time interval when a onClick method is triggered on react js
- Render HTML inside a Material-UI Card with React
- Why can't React project name contain capital letters?
- React - Unexpected Token, expected }
- Change scroll button Icon on Material UI Tabs component
- Redux: functions passed in mapDispatchToProps "not a function"
- Jest encountered an unexpected token because trying to import a file which Jest cannot parse
- How to Call a Function inside a Render in React/Jsx
- How we can read excel file multiple sheets in ReactJS
- Removing objects from array with the click of a button React
- Why is flex container wrapper the flex items despite exceeding 100%?
- Checking if http is success or fail Reactjs
- Update state in Child
- How can I create new global css classes on the fly in React?
- Pass JSON object as props with useNavigate function in React
- react-snap no such file or directory
- I'm using React and my components are not rendered
- this.props equal to nextProps componentShouldUpdate
- Material UI Checkbox is repeating the same value twice in one instance
- Dynamically access element of array using generic constraints and keyof operator
- Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes
- Electron.js and webpack with Creact-react-app