it is possible to make a component repeat several times and edit it on a one-time basis for each repetition. Add code that I would like to repeat.

import React from 'react';

import "../Styles/card-publication.css"
function CardPublication(props) {
    return (
        <div className="Card">
            <div className="Card Incard">

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

export default CardPublication

CodePudding user response：

you can use a thing call props in react. it's a way to pass data to components in react.

you would use it like that.

import React from 'react';

import "../Styles/card-publication.css"
function CardPublication(props) {
    return (
        <div className="Card">
            <div className="Card Incard">
                {props.title}
            </div>
            <p className="Descripcion">{props.children}</p>
        </div>
    );
}

export default CardPublication

children is a thing you pass between tags

so now you use your component like that:

<CardPublication title="foo">bar</CardPublication>

you can also do this thing called destructuring, so instead of calling props object each time, you pick certain properties from it on work on them directly, which will be useful for readability purposes.

import React from 'react';

import "../Styles/card-publication.css"
function CardPublication({title, children}) {
    return (
        <div className="Card">
            <div className="Card Incard">
                {title}
            </div>
            <p className="Descripcion">{children}</p>
        </div>
    );
}

export default CardPublication