REACTJS - Aplicação de Página �nica - #12 Props

Nesse tutorial vamos falar um pouco sobre o uso de props no ReactJS.

Trabalhando com props no React

Para implementar as props no React, vamos utilizar primeiramente o componente information e vamos inserir uma div com itens nele. Posteriormente, vamos transformar esses itens em um componente InformationItem.js que receberá as propriedades.

import React from 'react';

export default class InformationItem extends React.Component{
    render(){
        return(
            <div className="vantagensItem ">
                <div className="vantagensItemImg">
                    <img src={"img/icons/"+this.props.image} alt={this.props.alt} title={this.props.title}/>
                </div>
                <div className="vantagensItemTxt">
                    {this.props.text} <br/>
                    R${this.props.value}
                </div>
            </div>
        );
    }
}

No nosso componente Information agora basta chamar o componente InformationItem passando as propriedades para ele. Você pode mandar as propriedades diretamente na tag do componente ou através do spread operator:

render(){

    const div1={
        image:"a.png",
        alt:"Excelente imóvel",
        text:"Apartamento com preço incrível",
        value:"600,00"
    }

    const div2={
        image:"b.png",
        alt:"Excelente imóvel",
        text:"Apartamento com preço incrível",
        value:"1000,00"
    }

    return(
    <div>
        <div className="vantagens">
                <InformationItem {...div1} />
                <InformationItem {...div2} />
            </div>
    </div>
    );

Dessa forma utilizamos componentes e reduzimos bastante nosso código.