I want to generate new column as the user enter the column name in the textbox. So I created a array named as column and created a function to push new Header in it and iterated a map function over it, I thought as the new header gets pushed into the array a new column will get generated but nothing happened like that.

     import { useState } from 'react';
import './App.css';
import Table from 'react-bootstrap/Table'

function App() {

  const [header, setHeader] = useState("");

  let column = []

  const addHeader = (e) => {
    e.preventDefault();

    setHeader(e.target.value)
  }

  const addColumn = () => {
    column.push(header)
    console.log(column)
  }



  return (
    <>
      <div>
        <form>
          <input type="text" onChange={addHeader} />
        </form>
        <button onClick={addColumn}> Add </button>
      </div>
      <div className="container">
        <div>
          <Table striped bordered hover responsive variant="light">
            <thead>
              <tr>
                <th> Cavity No. </th>
                <th> Column 1 </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> </td>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
                <td> </td>
              </tr>
            </tbody>
          </Table>
        </div>
        {column.map((index) => (
          <Table striped bordered hover responsive variant="light">
            <thead>
              <tr>
                <th> {index} </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
            </tbody>
          </Table>
        ))}
      </div>
    </>
  );
}

export default App;

CodePudding user response：

By default when setState is called react render the component again and makes
let column = [] run again.

Changes in below code:

1. used setState for the column array.
2. modified the addColumn method to update the state.
3. added value attribute in the input tag.
4. added key attribute in Table tag to avoid errors.

import { useState } from "react";
import "./App.css";
import Table from "react-bootstrap/Table";

function App() {
  const [header, setHeader] = useState("");

  const [column, setColumn] = useState([]);

  const addHeader = (e) => {
    e.preventDefault();
    setHeader(e.target.value);
  };

  const addColumn = () => {
    setColumn([...column, header]);
    setHeader("");
    console.log(column);
  };

  return (
    <>
      <div>
        <form>
          <input type="text" value={header} onChange={addHeader} />
        </form>
        <button onClick={addColumn}> Add </button>
      </div>
      <div className="container">
        <div>
          <Table striped bordered hover responsive variant="light">
            <thead>
              <tr>
                <th> Cavity No. </th>
                <th> Column 1 </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> </td>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
                <td> </td>
              </tr>
            </tbody>
          </Table>
        </div>
        {column.length > 0 &&
          column.map((index, ind) => (
            <Table striped bordered hover responsive variant="light" key={ind}>
              <thead>
                <tr>
                  <th> {index} </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td> </td>
                </tr>
                <tr>
                  <td> </td>
                </tr>
                <tr>
                  <td> </td>
                </tr>
                <tr>
                  <td> </td>
                </tr>
              </tbody>
            </Table>
          ))}
      </div>
    </>
  );
}

export default App;

CodePudding user response：

You will take a default value of your column e.g if you want default columns 6 then

const[col,setColumn]=useState([0,0,0,0,0]);

now when user enter in text box you will push the value into array and its length will be 7 at the same time you will map thorgh array but only using its length.You can also check todo list how we add new to item in a list.