Changing <span> to <input> for Specific Elements of a Component

Question

I want to change the tag to and build up a form to edit the elements of the students whose onClick event has triggered. It should change the spans to inputs only for the ones that their edit button gets clicked. However, the whole elements get rendered as inputs. Has anyone got any ideas about this issue and how to fix it?

App.js :

import React, { Component } from 'react';
import appStyles from './App.module.css';
import Student from './Student/Student';
import student from './Student/Student';
import { faSdCard } from '@fortawesome/free-solid-svg-icons';

class App extends Component{
  state = {
    student : [
      {name: "John", age: 23, field: "Computer Science", edit: false},
      {name: "Joe", age: 20, field: "Geography", edit: false},
    ]
  }
  editToggleHandler = (event, index) => {
    event.preventDefault();
    const student = {...this.state.student[index]};
    const students = [...this.state.student];
    if(!student.edit)
    {
      student.edit = true;
    }
    else
    {
      student.edit = false;
    }
    students[index] = student;
    this.setState({student: students});
  }
 render(){
    let students = null;
    students = (
      <div id = "students">
      {(this.state.student.length) ?
      this.state.student.map((student, index) => {
        return <Student key = {student.index}
                        name = {student.name}
                        age = {student.age}
                        field = {student.field}
                        edit = {student.onEdit}
                        onDelete = {() => this.itemDeleteHandler(index)}
                        onEdit = {(event) => this.editToggleHandler(event, index)}/>
      }) : <div className = {appStyles.notAvailable}> <p>No Students Found</p> </div>
      }
      </div>
    )
    return (
      <div className= {appStyles.App}>
        <div className = {appStyles.studentsContainer}>
          <h2 className = {appStyles.title}>Students List</h2>
          <div className = {appStyles.studentsComponent}>
          <div className = {appStyles.formContainer}>
            <form onSubmit = {this.studentSubmitHandler} className = {appStyles.form}>
              <input type = "text" name = "name" placeholder = "Name"/>
              <input type = "text" name = "age" placeholder = "Age"/>
              <input type = "text" name = "field" placeholder = "Field of Study"/>
              <button type = "submit" className = {appStyles.formButton}>Submit</button>
            </form>
          </div>
            {students}
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Student Component:

import React from 'react';
import studentStyles from './Student.module.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEdit } from '@fortawesome/free-solid-svg-icons';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';

const student = (props) => {
    const userEdit = <FontAwesomeIcon icon={faEdit} />
    const Trash = <FontAwesomeIcon icon={faTrashAlt} />
    const normalMode = (<div className = {studentStyles.student}>
                            <div className = {studentStyles.Container}>
                                <span>{props.name}</span>
                            </div>
                            <div className = {studentStyles.Container}>
                                <span>{props.age}</span>
                            </div>
                            <div className = {studentStyles.Container}>
                                <span>{props.field}</span>
                            </div>
                            <div className = {studentStyles.buttonsContainer}>
                                <button onClick = {props.onEdit} className = {`${studentStyles.button} ${studentStyles.buttonEdit}`}>{userEdit}</button>
                                <button onClick = {props.onDelete} className = {`${studentStyles.button} ${studentStyles.buttonRemove}`}>{Trash}</button>
                            </div>
                        </div>);
    const editMode = (<div className = {studentStyles.student}>
                        <form>
                            <div className = {studentStyles.Container}>
                                <input type = "text" name = "name" value = {props.name} />
                            </div>
                            <div className = {studentStyles.Container}>
                                <input type = "text" name = "age" value = {props.age} />
                            </div>
                            <div className = {studentStyles.Container}>
                                <input type = "text" name = "field" value = {props.field} />
                            </div>
                            <div className = {studentStyles.buttonsContainer}>
                                <button onClick = {props.onEdit} className = {`${studentStyles.button} ${studentStyles.buttonEdit}`}>{userEdit}</button>
                                <button onClick = {props.onDelete} className = {`${studentStyles.button} ${studentStyles.buttonRemove}`}>{Trash}</button>
                            </div>
                        </form>
                    </div>);
    return((props.edit == false) ? normalMode : editMode);
}

export default student;

Answer 1

You are toggling the boolean property student.edit on your student object, but passing in student.onEdit to the edit property on the student component.

<Student 
  ...Other properties
  edit={student.edit}
/>