Dynamically Creating Table Rows With React

react table
react create table from array
dynamically add rows to table react
how to add row to a table using reactjs on button click
react table add row
react dynamic table columns
how to create table in react js
create dynamic table from json in react js

I am trying to create a Table using React and React-Bootstrap that has a custom number of table rows. The table is supposed to store data about player statistics of a certain video game, and based on the video game the statistics may change, thus the number of rows and titles of these rows must be able to dynamically change as well. I wanted to create an array in the state that held the list of current statistics, then map this array to a element using the map function and render the table. However, after trying several approaches I can't get any of the custom input to render. Below is the code :

Class Structure

class Statistics extends Component {
  constructor(props) {
    super(props)
    this.state = {
      game: '',
      player_names: [],
      positions: [],
      stat_categories: [
        'kills',
        'deaths',
        'assists'
      ]
    }
  }

  renderTableRows(array) {
    return (
      <tr>
        <th> NAME </th>
        <th> TEAM </th>
        <th> POSITION </th>
        { array.map(item => {
            console.log(item)
            <th key={item}> {item} </th>
          })
        }
      </tr>
    )
  }

  render() {
    const columnLength = this.state.player_names.length
    const statCols = this.state.stat_categories

    return (
      <div>
        <MyNav url={this.props.location.pathname} />
        <Table responsive striped bordered hover>
          <thead>
            { this.renderTableRows(statCols) }
          </thead>
        </Table>
      </div>
    )
  }
}

The console also properly logs the data in state (kills, deaths, assists) -- so the issue is when rendering the element. Any help would be appreciated!

Create Dynamic Table from json in react js | by Tarak, Create Dynamic Table from json in react js. In this article, we will see how we can create a table dynamically from any json (one level) using react js. All that we have to do is pass a json data as a property to the component and our component should be able to display the data in a tabular form. react-table. r eact – table is one of the most widely used table libraries in React. It has more than 7k stars on GitHub, receives frequent updates, and supports Hooks. The react-table library is very lightweight and offers all the basic features necessary for any simple table.

You have to render each item in separate trs, not as a series of ths

renderTableCols(array) {
  return array.map(item => <th>{item}</th>)
}

renderTableColValues(item, cols) {
  return cols.map(col => <td>{item[col]}</td>)
}

renderTableRows(array) {
  return array.map(item =>
    <tr>
      <td>{item.name}</td>
      <td>{item.team}</td>
      <td>{item.position}</td>
      {this.renderTableColValues(item, this.cols)}
    </tr>
  );
}

render() {
  return (
    <Table>
      <thead>
        <tr>
          <th>NAME</th>
          <th>TEAM</th>
          <th>POSITION</th>
          {this.renderTableCols(this.cols)}
        </tr>
      </thead>
      <tbody>
        {this.renderTableRows(items)}
      </tbody>
    </Table>
  );
}

More on tables https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

React.js creating a table with a dynamic amount of rows with an , <tr Population={zone.population} Zone={zone.name} /> does not seem like a valid React component to me. The lowercase <tr> indicates that this is not a custom� We have 4 students with id, name, age and email address. Since our table will be dynamic so it doesn't matter if we have 4 or 100 students. For Table Data Now we want to print out students data in the Dom. We often use map function in react to itearate over array. Lets write a separate function for table data and calling it in our render method

I will give you a similar answer of what youre encoutering but its kinda different approach with a excelent solution

So, you are trying to create a dynamic table but youre making table rows static, what i did was letting the table to receive arrays of head and data and then create as many rows or datas that are required.

heres the code

export function objectIntoTableData(object) {
 return Object.values(object).map((data, index) => {
   return  <td key={index}>{data}</td>;
  });
}

You must change this index to (value,index) => , thats just my use

tableRows(data) {
 return data.map(value => {
   return <tr key={value.index}>{objectIntoTableData(value)}</tr>;
 });
}
<thead>
  <tr>
    {head.map((value, index) => {
      return <th key={index}>{value}</th>;
    })}
 </tr>
</thead>
<tbody>{this.tableRows(data)}</tbody>

Rather use a id or index inside your object since the index callback of the map function, its unsafe to use for the keys.

 <ReactTableUse 
     head={["#", "Cell1", "Cell2", "Cell3"]}
     data={[{id:1, test:1},{id:2, test:2}]} 
 />

Dynamically Creating Table Rows With React, You have no return statement in your map function, inside of renderTableRows . When using ES6 arrow functions, you can either: Return data� In this article, we will see how we can create a table dynamically from any json (one level) using react js. All that we have to do is pass a json data as a property to the component and our…

Rules: When your state changes, render method of a class based component will be called. Question: Who will change the state? will it grow inside the component ? What is your problem ? your are not being able to render anything ? or statistics is not dynamically rendering ? if you want to change it dynamically , you need to change the state first.

Dynamically Create a Table In ReactJS Using React-Bootstrap , arslan #reactjs #coding Please don't forget Like, Comment and Subscribe if you' re new!Duration: 7:05 Posted: Jan 20, 2020 Start With a Basic React Data Table First, create a basic data table component that receives as props an array of headings and an array of rows. Map over these two arrays to extract cell content then break <Cell /> up into its subcomponent and pass content to it. Basic Data Table Component You can see the first problem in the image.

Create a Dynamic Table Column and Header in React Js , So let's create a table header first. A const variable is created with a name columnHeader. To make the table header dynamic the data should be from the backend� Dynamic tables in excel are the tables where when a new value is inserted to it, the table adjust its size by itself, to create a dynamic table in excel we have two different methods the once is which is creating a table of the data from the table section while another is by using the offset function, in dynamic tables the reports and pivot tables also changes as the data in the dynamic table

React Dynamic Table Rows, Analyze HTML; Maximize HTML Editor; Minimize HTML Editor; Fold All; Unfold All. xxxxxxxxxx. 7. 1. <html>. 2. <body>. 3. <p>React Dynamic Table Rows</p>. 4. React Table is a workhorse. It's built to materialize, filter, sort, group, aggregate, paginate and display massive data sets using a very small API surface. Just hitch your wagon (new or existing tables) to React Table and you'll be supercharged into productivity like never before.

Adding a Table row dynamically using React Hook, Introduction Recently I had a need to add table rows dynamically when user clicks on a link in the Table cell. I wanted to look it like, I can� If we later decide to update data.json file and add another 10 image file names - our React application will work without any changes. It will import updated data.json, get array of image file names and pass it to createImages function call. And that's how you create React.js components dynamically. Thank you for your attention!

Comments
  • Welcome to StackOverflow, in order to increase readability refrain from sharing images with code, paste the relevant code in the question and format it properly.
  • Geez... I was scratching my head for a little while there; that got it working. Thanks for the catch! Still new to React and SO - will keep the code formatting in mind for future reference :). Have a good one.
  • No worries, ES6 can be a bit weird, with its implicit returns, optional parentheses etc..at first!
  • The issue was that nothing was rendering at all, and it was because I had forgotten a return statement inside of my map function. I was mapping to the correct elements but not returning anything afterward.