how a get the value in react js

Question

I am facing an issue in react js, I want to get value of staff breaks from api data,

api data

staff: [
  {
    "id": "1",
    "full_name": "Barbershop",
    "breaks": [
      {
        "starttime": "10:00:00",
        "endtime": "12:00:00"
      },
      {
        "starttime": "12:30:00",
        "endtime": "1:00:00"
      }
    ]
  }
]

react component data

const getRowData = () => {
  return (
    this.state.staff &&
    this.state.staff.length &&
    this.state.staff.map(({ full_name,breaks }) => (
      <span className="more-space" key={full_name}>
        {id}
        {full_name}
        {breaks.start_date}   //this is not working
        {breaks.end_date}     //just show start_date or end_date
      </span>
    ))
  );
};

What should I change in my code? Can anyone help me?

i want to show `start_date` [@](https://stackoverflow.com/users/1823841/pala%d1%95%d0%bd) — adnan khan, May 13 '20 at 07:03
yes in my api data [@](https://stackoverflow.com/users/1823841/pala%d1%95%d0%bd) — adnan khan, May 13 '20 at 07:04
can you please tell me? [@](https://stackoverflow.com/users/1823841/pala%d1%95%d0%bd) — adnan khan, May 13 '20 at 07:07
More here: [How to access object properties in JavaScript](https://stackoverflow.com/q/11922383/2873538)? — Ajeet Shah, May 13 '20 at 07:38

Vivek Doshi · Accepted Answer · 2020-05-13T08:52:21.910

0

As per this :

staff: [
  {
    "id": "1",
    "full_name": "Barbershop",
    "breaks": [
      {
        "starttime": "10:00:00",
        "endtime": "12:00:00"
      },
      {
        "starttime": "12:30:00",
        "endtime": "1:00:00"
      }
    ]
  }
]

First : There is no start_date

Second : breaks is an array and not an object so {breaks.start_date} will not work, even if there was data with that key, you need to use index or loop over it again

I think what you need is something like this:

// {breaks.start_date}
// {breaks.end_date}
{ breaks.map(brk => <p>{brk.starttime}-{brk.endtime}</p> ) }

edited May 13 '20 at 08:52

answered May 13 '20 at 07:08

Vivek Doshi

56,649
12
110
122

thanks your time again [@](https://stackoverflow.com/users/2349407/vivek-doshi) – adnan khan May 13 '20 at 07:16
one more thing i ask? [@](https://stackoverflow.com/users/2349407/vivek-doshi) – adnan khan May 13 '20 at 07:48
Yes sure @adnankhan – Vivek Doshi May 13 '20 at 07:53
if i receive `start_time or end_time` just data show the message ? how shoud i do? [@](https://stackoverflow.com/users/2349407/vivek-doshi) – adnan khan May 13 '20 at 08:12
`{break.start_time} {break.end_time}` – Vivek Doshi May 13 '20 at 08:29

score 0 · Answer 2 · answered May 13 '20 at 07:20

0

this.state.staff.map((item) => {
  <span className="more-space" key={item.full_name}>
    {item.id} 
    {item.full_name} 
    {item.breaks.map((value) => {
      { value.starttime }
      { value.endtime }
    })}
  </span>
});

Add another variable besides value if you need to access the key as below

this.state.staff.map((item, key) => {})

answered May 13 '20 at 07:20

Akhil Chandran

380
3
12

thanks [@](https://stackoverflow.com/users/8156287/akhil-chandran) – adnan khan May 13 '20 at 07:27
if i receive `start_time or end_time` data show the message ? how shoud i do? [@](https://stackoverflow.com/users/8156287/akhil-chandran) – adnan khan May 13 '20 at 08:10
{ value.start_time } { value.end_time } – Akhil Chandran May 13 '20 at 08:41

jobayersozib · Answer 3 · 2020-05-13T08:43:52.547

There is no start_date and end_date inside breaks array

Full working example

import React from 'react';

class Staffcomponent extends React.Component{
  constructor(props){
    super(props)
    this.staff= [
          {
            "id": "1",
            "full_name": "Barbershop",
            "breaks": [
              {
                "starttime": "10:00:00",
                "endtime": "12:00:00"
              },
              {
                "starttime": "12:30:00",
                "endtime": "1:00:00"
              }
            ]
          }
        ]
    this.state={staff:this.staff}
  }

  getRowData = () => {
       return (
             this.state.staff.map((item) => {
                  return (<span className="more-space" key={item.full_name}>
                            {item.id} 
                            {item.full_name} 
                             {item.breaks.map((break) => {
                                 return (<span>
                                        { break.starttime }
                                         { break.endtime }
                                         </span>)
                            })}

                         </span>)
                        })
                 );
};

  render(){
    return(
      <div>{this.getRowData()}</div>
    )
  }
}

function App() {
  return (
    <div className="App">
      <Staffcomponent/>
    </div>
  );
}

export default App;

thanks [@](https://stackoverflow.com/users/7994054/jobayersozib) — adnan khan, May 13 '20 at 07:47
if i receive `start_time or end_time` data show the message ? how shoud i do? [@](https://stackoverflow.com/users/7994054/jobayersozib) — adnan khan, May 13 '20 at 08:11

how a get the value in react js

3 Answers3