When add new row of 2nd column , 1st row is row span in react.js

Question

When click add button of 2nd column ,want to make 1st column rowspan And when click add button of 4th column, want to rowspan 1st and 2nd column. Please someone can help me.. I try 2 days but I don't know where i need .. My first use reactjs

Current result:

Expected result:

addNewRow = (e) => {
        this.setState((prevState) => ({
            taskList: [...prevState.taskList, { index: Math.random(), softwareTable: "", task: "", taskNotes: "", taskStatus: "" }],
        }));
    }

return (
        props.taskList.map((val, idx) => {
            let softwareTable = `softwareTable-${idx}`, task = `task-${idx}`, taskNotes = `taskNotes-${idx}`, taskStatus = `taskStatus-${idx}`
            return (
                
                    
                                                <button onClick={()=>props.add()} type="button" className="btn btn-primary text-center">+</button>
                        <button className="btn btn-danger" onClick={(() => props.delete(val))} >-</button>
                    </td>
                    <td>
                        <textarea name="task" id={task} data-id={idx} className="form-control " />
                        <button onClick={()=>props.add()} type="button" className="btn btn-primary text-center">+</button>
                        <button className="btn btn-danger" onClick={(() => props.delete(val))} >-</button>
                    </td>
                    <td>
                        <textarea name="taskNotes" id={taskNotes} data-id={idx} className="form-control">
                        
                        
                    
                    
                        
                    

                
            )
        })
    )

render(){
return (


                                        
                                        
)
}

user_10756489 · Answer

You obviously have a data hierarchy here (project -> task -> note).

Here is a basic idea of how to render it in a table.

Put your +/- buttons into cells, and insert/delete the corresponding objects on clicks, then re-render the component. Good luck :)

const tableData = {
  projects: [
    {
      name: 'Project A',
      tasks: [
        {
          name: 'Task A1',
          notes: ['Note A1.1', 'Note A1.2']
        },
        {
          name: 'Task A2',
          notes: ['Note A2.1', 'Note A2.2', 'Note A2.3']
        },
        {
          name: 'Task A3',
          notes: ['Note A3.1']
        },
      ]
    },
    {
      name: 'Project B',
      tasks: [
        {
          name: 'Task B1',
          notes: ['Note B1.1']
        }
      ]
    }
  ]
}

const mapTask = task => {
    const notes = task.notes.map((note, index) => ({name: note, firstInTask: index === 0 ? task : null}));
  return {...task, notes};
}

const mapProject = project => {
    const tasks = project.tasks.map(mapTask);
  const projectNotes = tasks.reduce((all, task) => [...all, ...task.notes], []);
  const notes = projectNotes.map((note, index) => ({...note, firstInProject: index === 0 ? {...project, count: projectNotes.length} : null}));
  return {...project, tasks, notes};
}

const mapData = data => {
  const projects = data.projects.map(mapProject);
    const notes = projects.reduce((all, project) => [...all, ...project.notes], []);
  return {...data, projects, notes};
};

const Table = ({data}) => {
    const mappedData = mapData(data);
  console.log('MD: ', mappedData);
  
    return (
    
      {mappedData.notes.map(note => (
        
        {note.firstInProject && 
            }
       {note.firstInTask && }
         
      ))}
      
     
            {note.firstInProject.name}
          {note.firstInTask.name} {note.name}
        
    
  );
}

ReactDOM.render(, document.getElementById('container'));td {
  border: 1px solid gray;
}

When add new row of 2nd column , 1st row is row span in react.js

1 Answers