1

Sou iniciante no React, e estou tentando definir um valor padrão para um prop caso não seja passada, porém não esta funcionando.

Title.js

import React, { Component } from 'react';

export default class Title extends Component {
    render() {
        return (
            <div>
                <h1>Hello, {this.props.name  }</h1>
            </div>
        );
    }
}

Title.defaultProps = {
    name:'Janio Carvalho Jr'
}

App.js

function App() {
  return (

    <div className='container'>
        <Title name  />
    </div>
  );
};

1 Resposta 1

1

Você está usando errado, retire o nome da propriedade que vai funcionar, exemplo:

class Title extends React.Component {
    render() {    
        return (
            <div>
                <h1>Hello, {this.props.name  }</h1>
            </div>
        );
    }
}

Title.defaultProps = {
    name:'Janio Carvalho Jr'
}

function App() {
  return (
    <div className='container'>
        <Title/>
    </div>
  );
};


ReactDOM.render(<App/> , document.getElementById('root'));
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Aguarde ...</div>

Não precisa colocar a propriedade no componente se também não precisa passar valor, só é necessário quando for passar um valor em especifico.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .