Want dynamically add table row in react js

Question

I want to design the registration form in the react js. But I want to optimize the code as much as I can. I am successful in the traditional way that by using a lot of tr and td in form. what I want to achieve by using the javascript map function and want each row to contain three labels then the next row should start. I am not able to figure it out. will you help me out. Below is my JSX code.

{RegistrationData && RegistrationData.map((item,key)=>{
                                let row=false
                                if(key===0 || key===3)
                                    row=true
                                else
                                    row=false

                                return(
                                        <>
                                        {row && <tr>
                                            <h1>{item.label}</h1>
                                            
                                            </tr>}
                                        

                                        </>
                                );
                                
                            })

                            }

Dmytro Krasnikov · Accepted Answer · 2021-04-22 16:20:18Z

4

it looks like you need to make something opposite to flatten the array, So for this, I will recommend using reduce method as map will return array exactly the same length as initial array. First of all, I will transform the initial RegistrationData array [1,2,3,4,5,6,7] into the following [[1,2,3], [4,5,6], [7]] and then we can use map function to create rows and cells, hope it will help, see the example below

  {RegistrationData &&
    f.reduce((acc, cur) => {
      if (acc.length && acc[acc.length - 1].length < 3) {
        // lastRow = acc[acc.length - 1];
        acc[acc.length - 1].push(cur);
      } else {
        acc.push([cur]); // add new row
      }
      return acc;
    }, []).map((row) => {
      return <tr>{row.map(item => (<td>item.label</td>))}</tr>;
    })}

edited Apr 22, 2021 at 16:20

answered Apr 21, 2021 at 18:58

Dmytro Krasnikov

1,0046 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alen Vlahovljak · Accepted Answer · 2021-04-21 18:39:29Z

1

What I do is to define a JSON file and there I define all fields, then iterate with .map()

answered Apr 21, 2021 at 18:39

Alen Vlahovljak

5746 silver badges17 bronze badges

2 Comments

Technical knowledge Over a year ago

i have already defined and the name is json file is registration data.but how to have new row after three labels means when three td gets loaded.it should have new after each 3 td

Alen Vlahovljak Over a year ago

@Technicalknowledge I personally use the CSS framework to do the UI stuff. For a new line, you should refactor the JSON file. Maybe divide into separate arrays and then iterate each array, or try to do something with CSS framework (with <Row> and <Col>) such as Ant Design.

Collectives™ on Stack Overflow

Want dynamically add table row in react js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related