How to edit data received from a rest call in react?

user_10594845 0
Viewed 55

I am trying to make a rest call, edit the data and then render it. The problem is that, while editing, I am getting a error - undefined even after checking if the data is there.

component I am making the rest call from:

function Header ({timesheetData, loadTimesheet}) {    

    useEffect(() => {
        loadTimesheet(date)
    }, [])

    return(     
        <>
            <header className="header">
            <div className="wrap">
                <span className="btn-icon">
                    <IconPlus onClick={() => setIsOpen(true)} className="icon icon-plus js-modal-init"/>  
                </span>
                <div className="header-blockquote">
                    <h1 className="header-quote">{currentQuote.quote}</h1>
                    <div className="header-cite">{currentQuote.author}</div>
                </div>
            </div>
            <div className="header-inner">
                <div className="wrap">
                    <VegaIcon className="logo" alt="VegaIT"/>
                    <div className="date-wrap">
                        <IconCalendar className="icon icon-plus js-modal-init"/>
                        //
                        <time>{timesheetData.timesheet.loading ? "asd"  : edit(timesheetData)  }</time>
                        //
                    </div>
                </div>
            </div>
        </header>
            </>
        )
}


function edit(timesheetData){
    let newDate = timesheetData.timesheet.date
    newDate = newDate.split("-")
    newDate = newDate.reverse()
    return  newDate.join("/")
}

the redux action:

export const  loadTimesheet = (date) => {

    let url = "http://localhost:8080/api/timesheet/" + date

    return (dispatch) => {
        dispatch(getTimesheet)
        axios.get(url)
        .then((response) => {
            const timesheet = response.data
            dispatch(getTimesheetSuccess(timesheet))
        })
        .catch(error =>  {
            const errorMsg = error.message
            dispatch(getTimesheetFailure)
        })
    }
}

Edit: added my mapStateToProps and mapDispatchToProps

const mapStateToProps = state => {
    return {
        timesheetData: state.timesheet
    }
}

const mapDispatchToProps = dispatch => {
    return {
        loadTimesheet: (date) => dispatch(loadTimesheet(date))
    }
}

Edit2: The code: https://codesandbox.io/s/adoring-tharp-o9ibe

axios redux reactjs
1 Answers

use mapStateToProps, mapDispatchToProps:

import getTimesheet from '../actions/...'

Header ({timesheetData, loadTimesheet}) => {
 
}

const mapDispatchToProps = dispatch => {
  return {
    loadTimesheet: () => dispatch(getTimesheet()),
  }
}

const mapStateToProps = (state) => {
  return { timesheetData: state.timesheetData };
};

export default connect(mapStateToProps, mapDispatchToProps)(Header);

also in component:

before render: check that you have:

  • timesheetData - not undefined

  • timesheetData.timesheet - not undefined

  • timesheetData.timesheet.loading - not undefined

    const hasData = timesheetData && !timesheetData.timesheet.loading;
const time = hasData ? edit(timesheetData): "asd";

in render:

<time>{time}</time>
user_67504220
Related