CODEWITHSUNDEEP
reactjs
bp123
bp123

Reputation: 3417

Props are returning undefined

I'm using map to loop over an array of objects to populate a list. My loop appears to be working as I'm generating the correct number of lists however I can't access the data through props. It appears as though all my props are undefined.

Path: Component

function CareerPosition(props) {
  return (
    <li>
      {props.uniqueId}
  {props.companyName}
  {props.positionTitle}
    </li>
  )
}

Path: ReactPage

constructor(props) {
    super(props);

    this.state = {
      'position.uniqueId': '',
      'position.company': '',
      'position.title': '',
      data: [],
      profileCandidateCollectionId: null,
      errors: {}
    };

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const profileCandidateCollection = nextProps.profileCandidate;
    const profileCandidateCollectionId = profileCandidateCollection._id;
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions;
    console.log("componentWillReceiveProps: ", careerHistoryPositions);

    if (careerHistoryPositions) {
      const newData = careerHistoryPositions.map((position) =>
      ({
        'position.uniqueId': position.uniqueId || '',
        'position.company': position.company || '',
        'position.title': position.title || ''
      }));
      this.setState({
        data: newData
      })
    }
  }

  renderCareerPositions(props) {
    if(0 < this.state.data.length) {
      const careerPositions = this.state.data.map((position) =>
        <CareerPosition
          key={position.uniqueId}
          companyName={position.company}
          positionTitle={position.positionTitle}
          uniqueId={position.uniqueId}
        />
      );
      return (
        <ul>
          {careerPositions}
        </ul>
      )
    }
  }

Upvotes: 0

Views: 146

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281686

The problem is that in componentWillReceiveProps you are setting state with key position.title etx but you are accessing them only as title

Try this

 componentWillReceiveProps(nextProps) {
    const profileCandidateCollection = nextProps.profileCandidate;
    const profileCandidateCollectionId = profileCandidateCollection._id;
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions;
    console.log("componentWillReceiveProps: ", careerHistoryPositions);

    if (careerHistoryPositions) {
      const newData = careerHistoryPositions.map((position) =>
      ({
        'uniqueId': position.uniqueId || '',
        'company': position.company || '',
        'title': position.title || ''
      }));
      this.setState({
        data: newData
      })
    }
  } 


renderCareerPositions(props) {
    if(0 < this.state.data.length) {
      const careerPositions = this.state.data.map((position) =>
        <CareerPosition
          key={position.uniqueId}
          companyName={position.company}
          positionTitle={position.positionTitle}
          uniqueId={position.uniqueId}
        />
      );
      return (
        <ul>
          {careerPositions}
        </ul>
      )
    }
  }

Upvotes: 0

Mayank Shukla
Mayank Shukla

Reputation: 104379

Problem is in the way you are setting the keys in objects:

if (careerHistoryPositions) {
  const newData = careerHistoryPositions.map((position) =>
  ({
    'position.uniqueId': position.uniqueId || '',
    'position.company': position.company || '',
    'position.title': position.title || ''
  }));
  this.setState({
    data: newData
  })
}

You are adding extra word "position" to all keys, remove that otherwise you need to access the values inside map like this:

position["position.company"]

Remove position and write it like this:

if (careerHistoryPositions) {
    const newData = careerHistoryPositions.map((position) =>
    ({
        'uniqueId': position.uniqueId || '',
        'company': position.company || '',
        'title': position.title || ''
    }));
    this.setState({
        data: newData
    })
}

Then access the values inside map like this:

const careerPositions = this.state.data.map((position) =>
    <CareerPosition
       key={position.uniqueId}
       companyName={position.company}
       positionTitle={position.title}
       uniqueId={position.uniqueId}
    />
);

Upvotes: 1

Related Questions