React: Passing down props to functional components

Question

I have a seemingly trivial question about props and functional components. Basically, I have a container component which renders a Modal component upon state change which is triggered by user click on a button. The modal is a stateless functional component that houses some input fields which need to connect to functions living inside the container component.

My question: How can I use the functions living inside the parent component to change state while the user is interacting with form fields inside the stateless Modal component? Am I passing down props incorrectly? Thanks in advance.

Container

export default class LookupForm extends Component {     constructor(props) {         super(props);          this.state = {             showModal: false         };     }     render() {         let close = () => this.setState({ showModal: false });          return (             ... // other JSX syntax             <CreateProfile fields={this.props} show={this.state.showModal} onHide={close} />         );     }      firstNameChange(e) {       Actions.firstNameChange(e.target.value);     } }; 

Functional (Modal) Component

const CreateProfile = ({ fields }) => {   console.log(fields);   return (       ... // other JSX syntax        <Modal.Body>         <Panel>           <div className="entry-form">             <FormGroup>               <ControlLabel>First Name</ControlLabel>               <FormControl type="text"                 onChange={fields.firstNameChange} placeholder="Jane"                 />             </FormGroup>   ); }; 

Example: say I want to call this.firstNameChange from within the Modal component. I guess the "destructuring" syntax of passing props to a functional component has got me a bit confused. i.e:

const SomeComponent = ({ someProps }) = > { // ... };

Answer 1

You would need to pass down each prop individually for each function that you needed to call

<CreateProfile   onFirstNameChange={this.firstNameChange}    onHide={close}   show={this.state.showModal} /> 

and then in the CreateProfile component you can either do

const CreateProfile = ({onFirstNameChange, onHide, show }) => {...} 

with destructuring it will assign the matching property names/values to the passed in variables. The names just have to match with the properties

or just do

const CreateProfile = (props) => {...} 

and in each place call props.onHide or whatever prop you are trying to access.

Answer 2

I'm using react function component
In parent component first pass the props like below shown

import React, { useState } from 'react'; import './App.css'; import Todo from './components/Todo'    function App() {     const [todos, setTodos] = useState([         {           id: 1,           title: 'This is first list'         },         {           id: 2,           title: 'This is second list'         },         {           id: 3,           title: 'This is third list'         },     ]);  return (         <div className="App">             <h1></h1>             <Todo todos={todos}/> //This is how i'm passing props in parent component         </div>     ); }  export default App; 

Then use the props in child component like below shown

function Todo(props) {     return (         <div>             {props.todos.map(todo => { // using props in child component and looping                 return (                     <h1>{todo.title}</h1>                 )             })}         </div>       ); }