CODEWITHSUNDEEP
javascriptreactjs
Floro Varela
Floro Varela

Reputation: 69

React js. How to make a component with this structure: <Component> description of the component </Component>

I have the following code. And I am having trouble understanding how the ProjectCardDescription component should be implemented in order to be able to pass its description within the ProjectCard component

I've tried this, but got an empty component: 

import React, { Component } from 'react';

class ProjectCardDescription extends Component {
    render () {
        return (
            <span>
                {this.props.description}
            </span>
        );
    }
}

export default ProjectCardDescription;

This is how my ProjectCard component looks like:

import React, { Component } from 'react';
import ProjectCardIcon from './ProjectCardIcon/ProjectCardIcon';
import './ProjectCard.css';
import ProjectCardDescription from './ProjectCardDescription/ProjectCardDescription';

class ProjectCard extends Component {        
    render() {
        return(
            <div className="project-card project-card-medium">
                <a href="https://www.linkedin.com/in/florovarelaa/" target="_blank" rel="noopener noreferrer">
                    <ProjectCardIcon icon='react'/> 
                    <ProjectCardDescription>
                        Una descripcion de un projecto hecho en react. Que contiene dos oraciones.
                    </ProjectCardDescription>
                </a>
            </div>
        );
    };      
}
export default ProjectCard;

I would like to get the ProjectCardDescription Component with its propper inside html. Should I pass it as props?

Upvotes: 0

Views: 47

Answers (2)

Donovan Hiland
Donovan Hiland

Reputation: 1499

If you want to use the structure you have:

<ProjectCardDescription>
  Una descripcion de un projecto hecho en react. Que contiene dos oraciones.
</ProjectCardDescription>

your ProjectCardDescription component should look like:

class ProjectCardDescription extends Component {
    render () {
        return (
            <span>
                {this.props.children}
            </span>
        );
    }
}

this.props.children is anything in between the opening and closing tags of your rendered component.

Documentation here

Upvotes: 1

Robin Zigmond
Robin Zigmond

Reputation: 18249

You didn't pass the component a description prop. This is done via (what look like) HTML attributes, as follows:

<ProjectCardDescription description="my description here" />

Note also that this is all you need, you don't need (or want) a closing tag and content inside. The render method of that component tells it how to convert the props to its internal content.

Upvotes: 1

Related Questions