CODEWITHSUNDEEP
javascriptreactjsjsx
linuxNoob
linuxNoob

Reputation: 720

Logging prop values in functional components possible?

I'm trying to view what props are getting passed to my component. Is there a way to log it in JSX? I'm using 2 functional components as in the following code block.

From the invocation I'm passing props as props:{programs:'Hello',locale:'en'}. It seems the props get into the ProgramsSummaryParent just fine but I am getting this message on the browser when it tries to render the ProgramsSummaryPlaceholder :

Failed prop type: The prop content is marked as required in TableCell, but its value is undefined.

Why am I unable to pass the prop?

const ProgramsSummaryParent = ({programs, locale,}) => (
<BaseSummary locale={locale}>
    <ProgramsSummaryPlaceholder prg={programs}/>
</BaseSummary>
);

const ProgramsSummaryPlaceholder = ({ prg, intl, }) => (
<div className="programs-summary">      
  <Table isStriped={true} isPadded={true}>
   <Table.Rows >
      <Table.Row >
        <Table.Cell content={prg.programs} />
      </Table.Row>
    </Table.Rows>
  </Table>
</div>
);

Upvotes: 0

Views: 683

Answers (2)

Hunter McMillen
Hunter McMillen

Reputation: 61512

You can change your child component to return a block, then you can add arbitrary statements for debugging:

const ProgramsSummaryPlaceholder = ({ prg, intl, }) => {
  console.log({ prg, intl });
  return (
    <div className="programs-summary">      
      <Table isStriped={true} isPadded={true}>
        <Table.Rows >
          <Table.Row >
            <Table.Cell content={prg.programs} />
          </Table.Row>
        </Table.Rows>
     </Table>
    </div>
  );
}

When you are done debugging, just change it back into returning just the JSX.

Upvotes: 1

Tharaka Wijebandara
Tharaka Wijebandara

Reputation: 8065

Use React Developer Tools browser extension.

After installing the extension you can open the developer tool and select React tab. There you will see all your components and you can select the component you want and see state and props it receives in the right-side pane.

Upvotes: 0

Related Questions