CODEWITHSUNDEEP
javascriptreactjstypescriptreact-native
Ellis1987
Ellis1987

Reputation: 43

Adding a Table Row into a Table in React

I am new to React and I am trying to build a very basic timesheet tool, where users can add tasks into the application and save. I am using React as well as Typescript.

So far I have my main component that includes an empty array of tasks and the table. Then inside the table body I have mapped to pull the table rows and a separate component that includes the tags.

At the top of the table I have included a button that when clicked should create a new tasks array (so to not modify the state), then uses the concat method to the state to the new array of items and adds the new task. When the 'add item' button is clicked nothing happens, could someone tell me what I am doing wrong? and if this is the best way to achieve this?

Main Component:

import * as React from 'react';
import { ITimesheetToolProps } from './ITimesheetToolProps';
import { escape } from '@microsoft/sp-lodash-subset';
import TableRow from './TableRow';

export default class TimesheetTool extends React.Component<ITimesheetToolProps, any> {
  state = {
    tasks: []
  }

  addTask = (task) => {
    const tasks = [...this.state.tasks];
    this.setState({tasks: this.state.tasks.concat(task)});
  }

  public render(): React.ReactElement<ITimesheetToolProps, any> {
    return (
      <div>
        <button onClick={() => this.addTask}>Add Task</button>
        <table>
          <thead>
            <th>Project</th>
            <th>Task</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saaturday</th>
            <th>Sunday</th>
          </thead>
          <tbody>
            {this.state.tasks.map(task => <tr key={task}><TableRow /></tr>)}
          </tbody>
        </table>
      </div>
    );
  }
}

Table Row Component to be added onClick:

import * as React from 'react';
import { ITimesheetToolProps } from './ITimesheetToolProps';

export default class TableRow extends React.Component<ITimesheetToolProps, {}> {
    public render() {
        return (
           <React.Fragment>
               <td><input type="text" name="project" /></td>
               <td><input type="text" name="task" /></td>
               <td><input type="number" name="mon" /></td>
               <td><input type="number" name="tues" /></td>
               <td><input type="number" name="wed" /></td>
               <td><input type="number" name="thurs" /></td>
               <td><input type="number" name="fri" /></td>
               <td><input type="number" name="sat" /></td>
               <td><input type="number" name="sun" /></td>
           </React.Fragment> 
        )
    }
}

Upvotes: 4

Views: 3592

Answers (2)

Ellis1987
Ellis1987

Reputation: 43

Thanks, I called the task in my button and this resolved my issue.

Upvotes: 0

balmukund kumar
balmukund kumar

Reputation: 149

Problem is not with React but JavaScript. You are not invoking click handler correctly. Invoke your handler function like this

<button onClick={this.addTask}>Add Task</button>

But the argument you will get in function will be button event instead of task.

or call with task object which I cannot see in your component but I assume coming somewhere from props.

<button onClick={() => this.addTask(this.props.task)}>Add Task</button>

Upvotes: 4

Related Questions