reactjs - Passing Property To Another Component - React

Question

I need to pass "notecards" (an array) down from "Notecard.js" to "LoadQuestions.js". Console log shows that it is passing, but when I use {notecards} within the "return" it errors as "undefined". Could you please take a look?

Notecard.js (without the imports):

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
}));

export default function Notecard( {notecards} ) {
  const classes = useStyles();
  const next = () => {
    console.log('Next Button Clicked')
  };
  const previous = () => {
    console.log('Back Button Clicked')
  };
  const hint = () => {
    console.log('Hint Button Clicked')
  };
  console.log({notecards});

  return (
    <Card className={classes.root}>
      <div id="cardBody">
      <CardHeader
        title="Kate Trivia"
        // subheader="Hint: In the 20th century"
      />
      <CardContent>
        <LoadQuestions notecards={notecards}/>
      </CardContent>
      </div>
    </Card>
  );
}

LoadQuestions.js (without imports)

const {useState} = React;

export default function LoadQuestions( {notecards} ) {
    const [currentIndex, setCounter] = useState(0);
    console.log({notecards});

    return (
    <div>
        <Toggle
            props={notecards}
            render={({ on, toggle }) => (
                <div onClick={toggle}>
                    {on ? 
                    <h1>{props.notecards} hi</h1> : 
                    <h1>{this.props[currentIndex].backSide}</h1>
                    }
                </div>
            )}
        />
        <button onClick={() => {
            console.log({notecards})
            if (currentIndex < (this.props.length-1)) {
                setCounter(currentIndex + 1);
            } else {
                alert('no more cards')
            }
            }}>Next Card
        </button>
        <button onClick={() => {
            if (currentIndex > 0 ) {
                setCounter(currentIndex -1);
            } else {
                alert('no previous cards')
            }
            }}>Previous Card
        </button>
    </div>
    );
}

Thanks in advance!

That's all the details I have for you, but stack overflow really wants me to add more before it will submit. Sorry!

question from:https://stackoverflow.com/questions/65925875/passing-property-to-another-component-react

Answer 1

You should check if props exists, first time it renders the component it has no props so it shows undefined.

First i must say you destructured notecards out, so no need to use props.

If you want to use props you should change

({notecards}) to (props)

and if not you can directly use notecards since it is destructured

I suggest you two ways

adding question mark to check if exists

 <h1>{props?.notecards} hi</h1>//in the case you want to use props

or

add the props in a if statement

 <h1>{props.notecards?props.notecards:''} hi</h1> // if notecards is destructured remove the "props."