Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React: Passing a variable from one component to another

I’m new to React. All I want to do is pass some constants from parent component to a child component.

import './App.css';
import { Display } from './Display';
import { Card } from './Card';

export function App() {
    const PIinput = {
        label: 'Personal Information',
        inputs: ['Name', 'Adress', 'Email', 'Phone'],
    };
    return (
        <>
            <div>
                <Card props={PIinput}></Card>
            </div>
            <Display />
        </>
    );
}
export function Card(props) {
    console.log(props, props.label);
    return (
        <div className='card'>
            <h2>{props.label}</h2>
            <form>
                {props.inputs.map((item) => {
                    return <h3>{item}</h3>;
                })}
            </form>
        </div>
    );
}

So when I pass PIinput to the Card component and try to console.log props it displays my object, but when I try to console.log or use props.label or props.inputs I get an undefined.

How do I properly pass these values?

Tags:

2

Answers


  1. 0

    <Card PIinput={PIinput} /> on parent.

    And in child component Card destructure props like this.

    function Card({PIinput}) {
  console.log(PIinput);
  ...
}
    Login or Signup to reply.
  2. 0

    You can learn about passing props from parent component to a child component here.

    In your case, your child component should have curly braces to define its props like:

    export function Card( {props} ) {
  // do stuff with props
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search