passing index through react components

Question

I'm studying Reactjs and I'm building a tasks project (CRUD) but I'm stuck at the point of editing, the editing part is in another component and I'm not able to send the index of the task that will be edit, I read the documentation but I'm not capable to make it, please if someone can see my code and tell what I'm doing wrong.

the app (main)code

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';

    // data
    import { todos2 } from './todos.json';

    // subcomponents
    import TodoForm from './components/TodoForm';
    import TodoFormEdit from './components/TodoFormEdit';

    class App extends Component {
      constructor() {
        super();
        this.state = {
          todos2, mode:'view'
        }

        this.handleAddTodo = this.handleAddTodo.bind(this);
        this.handleEdit2 = this.handleEdit2.bind(this);
      }

      removeTodo(index) {
        this.setState({
          todos2: this.state.todos2.filter((e, i) => {
            return i !== index
          })
        }); 
      }

      handleAddTodo(todo) {
        this.setState({
          todos2: [...this.state.todos2, todo]
        })
      }


      handleEdit2(i) {
        this.setState({mode: 'edit'});
        //const mode = mode === 'edit';


        alert(i);

         /* alert(this.state.todos2[i].title);
          alert(this.state.todos2[i].priority);
          alert(this.state.todos2[i].description);
          alert(this.state.todos2[i].language);*/


      }

      render() {

        const todosAll = this.state.todos2.map((todo, i) => {
          return (
            <div className="col-md-4" key={i}>
              <div className="card mt-4">
                <div className="card-title text-center">
                  <h3>{todo.title} - { i } </h3>
                  <span className="badge badge-pill badge-danger ml-2">
                    {todo.priority}
                  </span>
                </div>
                <div className="card-body">
                  <div>
                    {todo.description}
                  </div>
                  <div>
                    {todo.language}
                  </div>
                </div>
                <div className="card-footer">
                  <button
                    className="btn btn-danger"
                    onClick={this.removeTodo.bind(this, i)}>
                    Delete
                  </button>
                  <button
                    className="btn btn-warning ml-2"
                    onClick={this.handleEdit2.bind(this, i)}>
                    Edit
                  </button>
                </div>
              </div>
            </div>
          )
        });

return (
      <div className="App">

        <nav className="navbar navbar-dark bg-dark">
          <a className="navbar-brand" href="/">
            Tasks
            <span className="badge badge-pill badge-light ml-2">
              {this.state.todos2.length} 
            </span>
          </a>
        </nav>

        <div className="container">
          <div className="row mt-4">

            <div className="col-md-4 text-center">
                <img src={logo} className="App-logo" alt="logo" />
                {/* <TodoForm onAddTodo={this.handleAddTodo} ></TodoForm> */ }
                {this.state.mode === 'view' ? (
                   <TodoForm onAddTodo={this.handleAddTodo} />
                ) : (
                  <TodoFormEdit index={this.state.i}/>
                )}
            </div>

            <div className="col-md-8">
              <div className="row">
                {todosAll}
              </div>
            </div>


          </div>
        </div>


      </div>
    )

  }
}

export default App;

and the Edit component:

    import React, { Component } from 'react';

// data
import { todos2 } from '../todos.json';

class TodoFormEdit extends Component {

  constructor (i) {
    super(i);
    this.state = {
      todos2
    };



  }

  render() {



      return (

        <div>
          {this.state.todos2[0].title}
        </div>

      )



  }

}

export default TodoFormEdit;

Answer 1

You're passing this.state.i:

<TodoFormEdit index={this.state.i}/>

It's not clear where you set it–I see mode and todos2 state properties, I don't see i anywhere.