the for Loop inside React JSX

Question

i'm trying to create a table who change dynamically ,the number of its columns changes according to the number of days of the month(28,29,30,31)

i created the table manually ( but the number of columns is fixed to 31 ) :

https://i.stack.imgur.com/pAvPu.png

here is the component in which i tried to select the number of columns manualy according to the number of days of the current month (28,29,30,31) ,it shows nothing in the browser :

     //number of days in the current month
    function daysInCurrentMonth() {
        var now = new Date();
        return new Date(now.getFullYear(), now.getMonth()+1, 0).getDate();
      }
      let a=daysInCurrentMonth();
    return (
        <div>
            <table>
                <tbody>
                    <tr>
                        {() => {
                            for(let i=1;i<=a;i++){
                                 <td>{i}</td>
                            }
                        }}
                    </tr>
                </tbody>
            </table>
        </div>
    );
}
 
export default Test;

How i can i use a for loop inside this code ?

Answer 1

You need to return the td's from the function you're writing in JSX and call the function as well like this:

 return (
    <div>
      <table>
        <tbody>
          <tr>
            {(() => {
              let td = [];
              for (let i = 1; i <= a; i++) {
                td.push(<td key={i}>{i}</td>);
              }
              return td;
            })()}
          </tr>
        </tbody>
      </table>
    </div>
  );

a more efficient way to render it is to extract the function outside the JSX

 function daysInCurrentMonth() {
    var now = new Date();
    return new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
  }
  let a = daysInCurrentMonth();

  const renderTD = () => {
    let td = [];
    for (let i = 1; i <= a; i++) {
      td.push(<td key={i}>{i}</td>);
    }
    return td;
  };

  return (
    <div>
      <table>
        <tbody>
          <tr>{renderTD()}</tr>
        </tbody>
      </table>
    </div>
  );

If you want to remove the renderTD function you can create a new array of length a but I guess it's not a very efficient method to do this.

function daysInCurrentMonth() {
    var now = new Date();
    return new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
  }
  let a = daysInCurrentMonth();

  return (
    <div>
      <table>
        <tbody>
          <tr>
            {[...Array(a).fill(0)].map((_, i) => (
              <td key={i}>{i + 1}</td>
            ))}
          </tr>
        </tbody>
      </table>
    </div>
  );

Answer 2

The code block inside your jsx does not result in any value.

try replacing

 {() => {
    for(let i=1;i<=a;i++){
      <td>{i}</td>
    }
 }}

by something like:

Array(a).keys().map((i) => <td>{i-1}</td>)

There may be smarter ways than Array(a).keys() to generate the value range you need.

Answer 3

Better you should use map() Make sure you have your i is an array

i.map(elem -=>  {
    return <td>elem</td>
})