CODEWITHSUNDEEP
javascriptreactjschildrenreact-props
Michalistico
Michalistico

Reputation: 185

Why is not passing the props to the child?

I´m trying to pass two values as props from a React component "App" to his child "Todo". I´m passing the values title & completed from a json placeholder API. The JSON object is correct, i´ve checked that already.

The problem is that the child component only displays the first value "title" not the second one. Also the React console is showing that my constructor from the childs component is a useless constructor, which i don't understand. I´m supposed to call the constructor with props to use them in the component right?

Thank You.

App.jsx:

import React from 'react'
import Todo from './Todo'

import '../styles/Todo.css'

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            todos: []
        }
    }

    render() {
        return (
            <div className="todo-list">
                <Todo title="Hello" completed={false}></Todo> // HERE
            </div>
        );
    }
}

export default App;

Todo.jsx

import React from 'react';

import "../styles/Todo.css"

class Todo extends React.Component {
    constructor(props){ // USELESS CONSTRUCTOR?
        super(props);
    }
    render(){
        return(
            <div className="todo-item">
                <input type="checkbox" />
                <p> {this.props.title} </p>
                <p> {this.props.completed} </p> // NOT DISPLAYING
            </div>
        );
    }
}

export default Todo;

Upvotes: 0

Views: 132

Answers (2)

Giorgi Moniava
Giorgi Moniava

Reputation: 28654

<p> {this.props.completed} </p> // NOT DISPLAYING

It is not displaying because the value you pass to it is boolean. Apparently react doesn't render boolean values. You can convert it to string using toString() though if you want "false" to appear.

The warning about your constructor is that you aren't doing anything in it, hence its useless - and you can remove it.

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20755

When you don't have state but empty constructor it is useless and better to remove it.

About the value not displaying, completed is boolean value, you can do this.

<p> {this.props.completed.toString()} </p> // NOT DISPLAYING

Upvotes: 2

Related Questions