How do I access some data of a property I passed from parent component to child component?

Question

I am learning React and I am trying to call a function in a child component, that accesses a property that was passed from parent component and display it.

The props receives a "todo" object that has 2 properties, one of them is text.

I have tried to display the text directly without a function, like {this.props.todo.text} but it does not appear. I also tried like the code shows, by calling a function that returns the text.

This is my App.js

import React, { Component } from "react";
import NavBar from "./components/NavBar";
import "./App.css";
import TodoList from "./components/todoList";
import TodoElement from "./components/todoElement";

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

  addNewTodo(input) {
    const newTodo = {
      text: input,
      done: false
    };
    const todos = [...this.state.todos];
    todos.push(newTodo);
    this.setState({ todos });
  }
  render() {
    return (
      <div className="App">

        <input type="text" id="text" />
        <button
          onClick={() => this.addNewTodo(document.getElementById("text"))}
        >
          Add new
        </button>

        {this.state.todos.map(todo => (
          <TodoElement key={todo.text} todo={todo} />
        ))}
      </div>
    );
  }
}

export default App;

This is my todoElement.jsx

import React, { Component } from "react";

class TodoElement extends Component {
  state = {};

  writeText() {
    const texto = this.props.todo.text;
    return texto;
  }
  render() {
    return (
      <div className="row">
        <input type="checkbox" />
        <p id={this.writeText()>{this.writeText()}</p>
        <button>x</button>
      </div>
    );
  }
}

export default TodoElement;

I expect that when I write in the input box, and press add, it will display the text.

Answer 1

From documentation

Refs provide a way to access DOM nodes or React elements created in the render method.

I'll write it as:

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

  addNewTodo() {
    const newTodo = {
      text: this.textRef.current.value,
      done: false
    };
    const todos = [...this.state.todos, newTodo];
    this.setState({ todos });
  }
  render() {
    return (
      <div className="App">
        <input type="text" id="text" ref={this.textRef} />
        <button onClick={this.addNewTodo}>Add new</button>

        {this.state.todos.map(todo => (
          <TodoElement key={todo.text} todo={todo} />
        ))}
      </div>
    );
  }
}

In your approach, what you got as an argument to the parameter input of the method addNewTodo is an Element object. It is not the value you entered into the text field. To get the value, you need to call input.value . But this is approach is not we encourage in React, rather we use Ref when need to access the html native dom.