CODEWITHSUNDEEP
arraysreactjs
CHays412
CHays412

Reputation: 145

React why is this simple array map function not returning anything?

I have a React component creating a bulleted list for items in an array (called activePath). The array is reporting correctly via console.log, and here is the format:

{device_id: "nlab5320a", port_id: "XGigabitEthernet0/0/3"}

There are six of these in the array. I did an Array.isArray just to confirm that this is a true array and it is. I am trying to map this array and output a bulleted list with the following:

activePath.map((item, i) => (
  <li key={i}>{item.device_id}</li>
));

Here is the entire component ...

export default class ServicesInfo extends React.Component {
  render() {
    const { activePath } = this.props;
    const runTable = activePath.map((item, i) => (
      <li key={i}>{item.device_id}</li>
    ));

    return (
      <div>
        <ul>{runTable}</ul>
      </div>
    );
  }
}

The ServicesInfo is the child component. Here is the parent ...

   export default class InfoHolder extends React.Component {
    constructor(props) {
      super(props) {
    }
render() {
  return(
     <div>
       <p>Here is a listing of the nodes:</p>
       <ServicesInfo />
     </div>
    )
  }

A single bullet with no text is returning. I have been at this project for about 16 hours straight and think I am just missing something simple. Please help!

Upvotes: 2

Views: 60

Answers (2)

Yahya Ahmed
Yahya Ahmed

Reputation: 347

Pass your array in the component. Also add constructor(props){ super(props) {} to get props from other components.

export default class InfoHolder extends React.Component {
    constructor(props) {
      super(props) {
  this.state={
objectArray =[{device_id: "nlab5320a", port_id: "XGigabitEthernet0/0/3"}]     
}
    }
render() {
  return(
     <div>
       <p>Here is a listing of the nodes:</p>
       <ServicesInfo activePath={this.state.object} />
     </div>
    )
  }


    export default class ServicesInfo extends React.Component {
    constructor(props) {
          super(props) {
        }

  render() {
    const { activePath } = this.props;
    const runTable = activePath.map((item, i) => (
      <li key={i}>{item.device_id}</li>
    ));

    return (
      <div>
        <ul>{runTable}</ul>
      </div>
    );
  }
}

Upvotes: 1

im_tsm
im_tsm

Reputation: 2051

In the InfoHolder you haven't passed activePath as a prop to the ServicesInfo component. You have to pass the activePath like this: <ServicesInfo activePath={activePath} />

Codesandbox

Upvotes: 0

Related Questions