React: Passing props to function components

Question

I have a seemingly trivial question about props and function 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 function 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?

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);
    }
};

Function (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 function component has got me a bit confused. i.e:

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

score 101 · Accepted Answer · edited Dec 12 '17 at 14:53

101

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.

edited Dec 12 '17 at 14:53

Community

1
1

answered Oct 10 '16 at 18:00

finalfreq

6,830
2
27
28

How to `export default` this? – Nikolas Charalambidis Nov 20 '20 at 17:12
2

at the end write export default CreateProfile; – Kinjal Pathak Dec 11 '20 at 15:45
This was really helpful in my case @finalfreq thanks – Isaa Imam Aug 14 '21 at 04:55

score 37 · Answer 2 · edited Jan 04 '20 at 18:02

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>  
    );
}

what if i wanted to pass data from Todo to App? – sakib11 Mar 29 '20 at 05:29 — sakib11, Mar 29 '20 at 05:29
Best to do that with a callback – Izzi Sep 15 '21 at 08:57 — Izzi, Sep 15 '21 at 08:57

score 6 · Answer 3 · answered Nov 09 '19 at 12:22

6

An addition to the above answer.

If React complains about any of your passed props being undefined, then you will need to destructure those props with default values (common if passing functions, arrays or object literals) e.g.

const CreateProfile = ({
  // defined as a default function
  onFirstNameChange = f => f,
  onHide,
  // set default as `false` since it's the passed value
  show = false
}) => {...}

answered Nov 09 '19 at 12:22

MwamiTovi

2,425
17
25

1

Kept getting props.func is undefined even though I know it was being passed down. Now I know why! TY! This is the kind of stuff I Ioath about React. Takes too many knowledge tricks to get it working sometimes. – friendlyfire May 19 '20 at 21:59
@friendlyfire you'll later get the hang of it. Remember, a lot of those checks/controls to make sure stay safe. – MwamiTovi May 20 '20 at 19:40

Michael Freidgeim · Answer 4 · 2023-02-27T20:07:39.783

5

A variation of finalfreq's answer

You can pass some props individually and all parent props if you really want (not recommended, but sometimes convenient)

<CreateProfile
  {...this.props}
  show={this.state.showModal}
/>

and then in the CreateProfile component you can just do

const CreateProfile = (props) => {

and destructure the props individually

const {onFirstNameChange, onHide, show }=props;

edited Feb 27 '23 at 20:07

answered Dec 17 '21 at 00:52

Michael Freidgeim

26,542
16
152
170

score 4 · Answer 5 · answered Feb 08 '20 at 07:35

4

just do this on source component

 <MyDocument selectedQuestionData = {this.state.selectedQuestionAnswer} />

then do this on destination component

const MyDocument = (props) => (
  console.log(props.selectedQuestionData)
);

answered Feb 08 '20 at 07:35

Krishna Jangid

4,961
5
27
33

React: Passing props to function components

5 Answers5

Linked

Related