CODEWITHSUNDEEP
javascripthtmlcssreactjs
Mauro Arteaga
Mauro Arteaga

Reputation: 7

Change classname attribute of a div in a component

I have a card-publication component and I want to be able to make the component reusable and when declaring the tag I can also declare its classname and the position to place it in.

Component and main code.

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

and how should I declare them.

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

Upvotes: 0

Views: 80

Answers (1)

Ferri Adi Prasetya
Ferri Adi Prasetya

Reputation: 339

You can parsing the props from your declaration components to the component, there is an explain of your case. You must set the arguments on your component first

import React from 'react';

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

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

export default CardPublication

And then you can declaration your component with props and value that you want

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

So, the name props will parsing the argument to your component. And you will have two div with "cards1" class and "cards2" class.

You also can learn about components and props on https://reactjs.org/docs/components-and-props.html

Upvotes: 1

Related Questions