Update the class name property of a div within a component

Question

Update the class name property of a div within a component

I am working on creating a reusable card-publication component that allows me to specify the classname and position when declaring the tag.

Below is the code for the component:

import React from 'react';

function CardPublication({name}) {
    return (
        <div id={name}>
            <div id="Card Incard">

            </div>
            <p id="Descripcion"> Paragraph .</p>
        </div>
    );
}

export default CardPublication

Here is an example of how you can declare multiple instances of the component:

<CardPublication ></CardPublication>
<CardPublication ></CardPublication>

javascript html css reactjs

Answer 1

Answer №1

To pass props from your parent components to the child component, you need to define the props in the child component first. Here is an example of how you can do this:

import React from 'react';

function CardPublication({props}) {
    return (
        <div className={props.name}>
            <div id="Card Incard">

            </div>
            <p id="Description"> This is a paragraph.</p>
        </div>
    );
}

export default CardPublication

After defining the props in the child component, you can then use the component with different values for the props like this:

<CardPublication name="cards1"></CardPublication>
<CardPublication name="cards2"></CardPublication>

In this case, the "name" prop will be passed to the child component resulting in two divs with classes "cards1" and "cards2".

If you want to learn more about components and props in React, you can visit https://reactjs.org/docs/components-and-props.html

Answer 2

To pass props from your parent components to the child component, you need to define the props in the child component first. Here is an example of how you can do this:

import React from 'react';

function CardPublication({props}) {
    return (
        <div className={props.name}>
            <div id="Card Incard">

            </div>
            <p id="Description"> This is a paragraph.</p>
        </div>
    );
}

export default CardPublication

After defining the props in the child component, you can then use the component with different values for the props like this:

<CardPublication name="cards1"></CardPublication>
<CardPublication name="cards2"></CardPublication>

In this case, the "name" prop will be passed to the child component resulting in two divs with classes "cards1" and "cards2".

If you want to learn more about components and props in React, you can visit https://reactjs.org/docs/components-and-props.html

Update the class name property of a div within a component

Answer №1

Similar questions

Rendering data from the server using backbone.js: A comprehensive guide

Issue encountered when attempting to use an HTML document as a blueprint for generating additional HTML documents with the

arranging three divs in a row, with one div expanding to fill the entire height while the other two divs evenly split the remaining

Having trouble displaying an image in your React project?

Having trouble processing a JSON object using Jquery?

ThreeJS is giving an error message stating that it cannot find a corresponding function for 'mapTexelToLinear'

Exploring the world of chained JavaScript Promises for automatic pagination of an API

Creating a mechanism that fetches web links and automatically substitutes the URL with the corresponding title of the webpage

Create a three-dimensional tree array in Typescript/Javascript by transforming a flat array

Exploring the process of retrieving a pre-defined array within AngularJS

When using setTimeout in React, I encountered an error message saying that this.setState is not

"Navigate back with just a click - XSL button

Formatting code within an HTML document

What is the method with the greatest specificity for applying styles: CSS or JS?

Activate the element only when all input fields are completed. This function can be used repeatedly

Using dataloader on ammap effectively involves importing the necessary data into the platform

How can I accurately show the server time and timezone in JS/jQuery regardless of the user's location?

Reduce the count by clicking a button while maintaining the previous state

Encountering a tabindex issue with React and Material-UI Modal functionality

Having trouble with a malfunctioning JavaScript function? Need help resolving the issue?