CODEWITHSUNDEEP
javascriptreactjs
Beau Bridges
Beau Bridges

Reputation: 55

ReactJs How to add a row to a table from a different page

I am making an app in which has a table on one page and I need to add a row to that table from a different page on a button click. My pages are using reactstrap and reactjs, I have exported all my pages and they can be rendered on a button click.

Ex of the table page: file name table.js

class table extends Component {
  render() {
    return (
            <table>
            <thead>
              <tr>
                <th>row1</th>
                <th>row2</th>
                <th>row3</th>
                <th>row4</th>
                <th>row5</th>
              </tr>
            </thead>

            <tbody>
                <tr>
                  <td scope="row">1</td>
                  <td>text</td>
                  <td>text</td>
                  <td>text</td>
                  <td>text</td>
                </tr>
            </tbody>
)
};
export default table;

I need the code for this page ex - example.js

class addRow extends Component {
  I need the function that will add a row to table.js on button click

   render() {
     return(
        <Button>this button will add a row to table.js</Button>
     )
   };
 }
 export default addRow;

On this page, I need the code to put in rows on the table.js page. It will essentially add a row to the table from example.js to table.js

Is there a lead someone can link me to or explain how I could do this?

Upvotes: 0

Views: 916

Answers (2)

MinimumViablePerson
MinimumViablePerson

Reputation: 81

It seems you're attempting to have manipulate your data as if it was static, and that is missing the point of what React is here to do: dynamically render components based on your state.

So instead, I would get my table data as state, and then just modify that state whenever I want to add a new row. Here's how:

class Table extends React.Component {
  state = {
    // this is your table represented as a 2D array
    table: [
      ["row1", "row2", "row3", "row4", "row5"],
      [1, "text", "text", "text", "text"],
      [2, "text", "text", "text", "text"],
    ]
  }

  addRow = row => {
    const table = this.state.table.slice()
    table.push(row)
    this.setState({ table })
  }

  render() {
    const headers = this.state.table.slice(0, 1)[0]
    const rows = this.state.table.slice(1)

    return (
      <div>
        <table>
          // your headers are rendered here
          <TableHeaders headers={headers} />
          <tbody>
            {
              // each row will be dynamically rendered here
              rows.map(row => <TableRow row={row}/>)
            }
          </tbody>
        </table>
        // this button is passed down a method that can add rows
        <AddRowButton addRow={this.addRow} />
      </div>
    )
  }
}

const TableHeaders = ({ headers }) =>
  <thead>
    <tr>
      { headers.map(header => <th>{ header }</th>) }
    </tr>
  </thead>

const TableRow = ({ row }) =>
  <tr>
    { row.map(cell => <td>{cell}</td>) }
  </tr>

const AddRowButton = ({ addRow }) =>
  <button onClick={() => addRow(['test','test','test','test','test'])}>
    ADD ROW
  </button>


ReactDOM.render(<Table />, document.querySelector('#root'))

And here you can find a working example I made on CodePen just now: https://codepen.io/NMarcora/pen/ajpPEo

Things can be made cleaner and extracted further, but I hope you get the idea.

Upvotes: 1

wdm
wdm

Reputation: 7189

If AddRow is intended to be a child component of Table then you can pass a method down as a prop like this:

class Table extends Component {
    addRow = () => {
        // code to add row to table
    }
    render() {
        return (
            <table> ... </table>
            <AddRow addRow={this.addRow}/>
        )
    };
}

class AddRow extends Component {
    render() {
        return (
            <button onClick={this.props.addRow}>Add Row</button>
        )
    }
}

Upvotes: 1

Related Questions