CODEWITHSUNDEEP
reactjsreact-hooks
Luiz
Luiz

Reputation: 339

Can I pass a State Hook as a prop to a component?

Context: I'm fairly new to React so I may be going about this the wrong way, but I have a parent page with two components with different forms. I need the document id of the first form when submitted when it's complete to use in the second one. To do that I've tried placing the logic for both in the parent form, but to be able to hide the first form after it's been submitted, it's in a separate file and imported as a component

Anyway, to do this I'm trying to pass a State Hook like the following as a prop

const [zData, setzData] = useState({
    _id: uuidv4(),
    something: '',
    example: '',
  });

I can pass zData with no problem, but I can't pass setzData, I run into an error stating it's not a function. Is there any work around or other solution?

Edit On the component I have this

<Part1 handleSubmit={handleSubmit} zData={zData} setzData={setzData} />

And on the other file its pretty much this

function Part1(handleSubmit, zData, setzData) {
return (<>

                <TextField
                  required
                  name="firstName"
                  label="First Name"
                  fullWidth
                  autoComplete="First name"
                  value={zData.firstname}
                  onChange={(e) => setzData({ ... zData, firstname: e.target.value })}
                />
</>);
}

Upvotes: 0

Views: 1584

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 84912

function Part1(handleSubmit, zData, setzData) {

Props get passed to the component as a single parameter, not multiple. So what you've called handleSubmit is actually the props object, while the others are undefined.

You can either use a single parameter (probably rename it props), and access properties on it:

function Part1(props) {
  // ...
  value={props.zData.firstName}
  onChange={(e) => props.setzData(/*...*/)}
}

Or what you probably meant to do was to destructure the object into local variables:

function Part1({ handleSubmit, zData, setzData }) {

Upvotes: 1

Related Questions