DEV Community

Diomedes Lajara
Diomedes Lajara

Posted on

1 1

Propping components

The most important thing is to pass data from parent component to children components using props. Also to customize how a component interacts/behaves or the looks/style of it.

The content inside a component’s tags can be called using props.children. This is used to place anything from text to jsx or even another component, which makes it a child component from another file.

Three parts of a Component
Nesting: comp inside another comp
Create a new component but only import one react library and instead of rendering the component, export it using default followed by the name of the component.

Reusability: flexibility for multiple uses. few/simple components as possible
Do not forget to import the component at the top of the main index.js file and also calling the component using tags

Configuration: props is used to configure a component
Use props as the first argument/parameter? Of the component function. Using dot notation to invoke the prop like an object call.
The prop goes after the component name like passing style or className as if it was and HTML/JSX tag.

https://thepracticaldev.s3.amazonaws.com/i/spgxnfggv3sh8xlfyrjt.png

...justnotes

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay