How to call a user defined function to print inside a <td> in react

Question

I have a react class component which prints a table. I am retrieving an array from the database along with the other data and now I want to print the values in the array in a single row (). I am trying to to do that using a separate function instead of writing a for loop within the tag

This is how I did i :-

export default class ViewWeekdayWorkingDays extends Component{

    constructor(props){
        super(props);

        this.state = {
            dayType : '',
            noOfWorkingDays : 0,
            arr_workingDays : [],
            workingHours : 0,
            workingMinutes : 0,
            timeSlot : ''
        };

        this.printDays = this.printDays.bind(this);
    }

    componentDidMount() {

        axios.get('/workingdays/get', { params : {dayType : 'Weekday'}})
            .then(res => {

                if(res.data.success){

                    this.setState({
                        dayType : res.data.result.dayType,
                        noOfWorkingDays : res.data.result.noOfDays,
                        arr_workingDays : res.data.result.workingDays,
                        workingHours : res.data.result.workingHours.hours,
                        workingMinutes : res.data.result.workingHours.minutes,
                        timeSlot : res.data.result.workingTimeSlot
                    })
                } else {
                    alert("Empty data set")
                }

            })
            .catch(err => alert("Error Reading Data"))

    }

    //method to print the array data
    printDays = () => {
   
        const days = '';

        this.state.arr_workingDays.map(day => {

            days = days + day + "\n";
        })

        return days;
    }

    render() {
        return (
            <div className="main">
                <WorkingDaysNav/>
                <h3>Weekday</h3>
                <div className="form">
                    <table style={{width:"100%"}}>
                        <tr>
                            <th style={{fontSize:"15px"}}>Total Working Days</th>
                            <td style={{fontSize:"15px"}}>{this.state.noOfWorkingDays}</td>
                        </tr>
                        <tr>
                            <th style={{fontSize:"15px"}}>Days</th>
                            <td style={{fontSize:"15px"}}>
                               {this.printDays}             // <-------- this is how I call the method
                            </td>
                        </tr>
                        <tr>
                            <th style={{fontSize:"15px"}}>Working Hours</th>
                            <td style={{fontSize:"15px"}}>{this.state.workingHours} hours {this.state.workingMinutes} minutes</td>
                        </tr>
                        <tr>
                            <th style={{fontSize:"15px"}}>Time Slot</th>
                            <td style={{fontSize:"15px"}}>{this.state.timeSlot}</td>
                        </tr>
                    </table>
                    <br/>
                    
                    <form>
                        <div className="row">
                            <div className="column">
                                <button type="submit"
                                    className="btn mb-2"
                                    style={{backgroundColor: "#312450", color: "white", marginLeft: "50%", width: "100px"}}
                                >Edit</button>
                            </div>
                            <div className="column">
                                <button type="submit"
                                    className="btn mb-2"
                                    style={{backgroundColor: "#312450", color: "white", marginLeft: "40px", width: "100px"}}
                                >Delete</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        );
    }
}

It doesn't print anything.The array consist all the weekdays and I want to print them one by one in a new line. How can I solve this issue. Thanks in advance!

Answer 1

Ciao, unfortunately this happens because reactjs re-render page content only if you change state. Try to put const days in state like this:

this.state = {
   dayType : '',
   noOfWorkingDays : 0,
   arr_workingDays : [],
   workingHours : 0,
   workingMinutes : 0,
   timeSlot : '',
   days: ''
};

And then your componentDidMount becomes:

componentDidMount() {

    axios.get('/workingdays/get', { params : {dayType : 'Weekday'}})
        .then(res => {

            if(res.data.success){

                this.setState({
                    dayType : res.data.result.dayType,
                    noOfWorkingDays : res.data.result.noOfDays,
                    arr_workingDays : res.data.result.workingDays,
                    workingHours : res.data.result.workingHours.hours,
                    workingMinutes : res.data.result.workingHours.minutes,
                    timeSlot : res.data.result.workingTimeSlot
                }, () => {
                    const days = '';
                    this.state.arr_workingDays.map(day => {
                    days = days + day + "\n";
                    this.setState({days: days});
                 })
               );
            } else {
                alert("Empty data set")
            }

        })
        .catch(err => alert("Error Reading Data"))

}

And your render function becomes:

render() {
        return (
            <div className="main">
                <WorkingDaysNav/>
                <h3>Weekday</h3>
                <div className="form">
                    <table style={{width:"100%"}}>
                        <tr>
                            <th style={{fontSize:"15px"}}>Total Working Days</th>
                            <td style={{fontSize:"15px"}}>{this.state.noOfWorkingDays}</td>
                        </tr>
                        <tr>
                            <th style={{fontSize:"15px"}}>Days</th>
                            <td style={{fontSize:"15px"}}>
                               {this.state.days}             
                            </td>
                        </tr>
                        <tr>
                            <th style={{fontSize:"15px"}}>Working Hours</th>
                            <td style={{fontSize:"15px"}}>{this.state.workingHours} hours {this.state.workingMinutes} minutes</td>
                        </tr>
                        <tr>
                            <th style={{fontSize:"15px"}}>Time Slot</th>
                            <td style={{fontSize:"15px"}}>{this.state.timeSlot}</td>
                        </tr>
                    </table>
                    <br/>
                    
                    <form>
                        <div className="row">
                            <div className="column">
                                <button type="submit"
                                    className="btn mb-2"
                                    style={{backgroundColor: "#312450", color: "white", marginLeft: "50%", width: "100px"}}
                                >Edit</button>
                            </div>
                            <div className="column">
                                <button type="submit"
                                    className="btn mb-2"
                                    style={{backgroundColor: "#312450", color: "white", marginLeft: "40px", width: "100px"}}
                                >Delete</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        );
    }

In this way, printDays function could be removed.

Answer 2

2 things

• call the function with ()
• inside the function return the output

relevant sample js:

import React, { Component } from "react";

const  Example = () => {

  const someArray = [
    {dayType: 'working day', hours: 8 },
    {dayType: 'weekend', hours: 0 },
    {dayType: 'project-go-live', hours: 12 },
    {dayType: 'time in lieu', hours: 0 },
  ]

  const dayPrinter = () => {
    return someArray.map(x=> (
      <p>{x.dayType} |  {x.hours} hrs</p>
      ))
  }

    return (
      <>
      {dayPrinter()}
      </>
    )

}

export default Example;

working snippet here