Question 52872 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to add new row in a table based on if condition in JSX REACT – Javascript

i have one table structure in my react app using jsx, here is my code…

<div>
              <TableWrapper className="table-data-view table-responsive">
                <ChartViewWrapper>
                  <table align="center" className="record">
                    <thead>
                      {!charts[0] || charts[0].freq === 6 ? (
                        <tr key="1">
                          <td>Date</td>
                          <td colSpan="3">MON</td>
                          <td colSpan="3">TUE</td>
                          <td colSpan="3">WED</td>
                          <td colSpan="3">THU</td>
                          <td colSpan="3">FRI</td>
                          <td colSpan="3">SAT</td>
                        </tr>
                      ) : (
                        ''
                      )}

                      {!charts[0] || charts[0].freq === 7 ? (
                        <tr key="2">
                          <td>Date</td>
                          <td colSpan="3">MON</td>
                          <td colSpan="3">TUE</td>
                          <td colSpan="3">WED</td>
                          <td colSpan="3">THU</td>
                          <td colSpan="3">FRI</td>
                          <td colSpan="3">SAT</td>
                          <td colSpan="3">SUN</td>
                        </tr>
                      ) : (
                        ''
                      )}

                      {!charts[0] || charts[0].freq === 5 ? (
                        <tr key="3">
                          <td>Date</td>
                          <td colSpan="3">MON</td>
                          <td colSpan="3">TUE</td>
                          <td colSpan="3">WED</td>
                          <td colSpan="3">THU</td>
                          <td colSpan="3">FRI</td>
                        </tr>
                      ) : (
                        ''
                      )}
                    </thead>
                    <tr>
                      <td>
                        29/12/14
                        <br /> to
                        <br /> 01/01/15
                      </td>
                      {charts.map((chart, index) => {
                        return (
                          <>
                            <td className="verticaltext">{chart.open}</td>
                            <th>{chart.jodi}</th>
                            <td className="verticaltext">{chart.close}</td>
                            { {(index + 1) % charts[0].freq === 0 ? </tr><tr> : ''} }
                          </>
                        );
                      })}
                    </tr>
                  </table>
                </ChartViewWrapper>
              </TableWrapper>
            </div>

enter image description here

here the task is that we have to add 34 from the starting second row below 06 under Monday column….as i tried the code mentioned in my code it shows error: JSX expressions must have one parent element.
I don’t know how to resolve such error in my case…..here we cannot use default table structure of react like dataSource and columns…can anyone help me to get rid out of this….

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After searching from google i finally get solution of my own problem...that i want to share here...

    Main Data:

      const { charts } = useSelector((state) => {
    return {
      charts: state.result.chartData,
    };
  });

    Now i split main data into interval and push on another array like this...

    const chartSource = [];

  const splitChart = (arr, chunk) => {
    for (let i = 0; i < arr.length; i += chunk) {
      const newArr = arr.slice(i, i + chunk);
      chartSource.push(newArr);
    }
  };

  splitChart(charts, charts[0].freq);

  console.log(chartSource);

    and finally return output as JSX like below:

    {chartSource.map((rows) => (
                        <tr>
                          <td>
                            29/12/14 <br /> to <br /> 01/01/15
                          </td>
                          {rows.map((row) => (
                            <>
                              <td className="verticaltext">{row.open}</td>
                              <th>{row.jodi}</th>
                              <td className="verticaltext">{row.close}</td>
                            </>
                          ))}
                        </tr>
                      ))}

    anyway thanks everyone....


  2. 0

    I’m not sure if this is the source of your error but you’ve inverted a closed and opened jsx tag:

    { {(index + 1) % charts[0].freq === 0 ? </tr><tr> : ''} }

    should be:

    { {(index + 1) % charts[0].freq === 0 ? <tr></tr> : ''} }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search