CODEWITHSUNDEEP
reactjsreact-native
Samantha
Samantha

Reputation: 31

undefined is not an object ( 'evaluating props.user.map') React Native

Hello for some reason when I try to map through a state that I am passing through from another component I get this error undefined is not an object ( 'evaluating props.user.map') and I have no idea why.

Here is where I am getting the state:

import React, { Component } from "react";
import { Button, View, Text, Image } from "react-native";

export class FakeInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: [
        {
          image: "Food",
          name: "Thomas King",
          Age: "23",
          description: "I am looking to meet new people",
          location: "South Carolina",
        },
      ],
    };
  }

  render() {
    return (
      <View>
        <View>
          {this.state.user.map((item) => (
            <Text>{item.name}</Text>
          ))}
        </View>
      </View>
    );
  }
}
export default FakeInfo;

Here is where I am mapping through the state and where I am getting the error:

import React, { Component } from "react";
import { Button, View, Text, Image } from "react-native";
import FakeInfo from "../UserPage/FakeProfileInfo";

const ViewProfile = (props) => (
  <View>
    {props.user.map((item) => (
      <Text>{item.name}</Text>
    ))}
  </View>
);

export default ViewProfile;

Upvotes: 0

Views: 557

Answers (2)

Pavel Petrovich
Pavel Petrovich

Reputation: 764

Do you really send 'user' in ViewProfile props?

I'll recommend you to write like this if you use ES6:

const ViewProfile = ({user = []}) => (
  <View>
    {props.user.map((item) => (
      <Text>{item.name}</Text>
    ))}
  </View>
);

or

const ViewProfile = (props) => (
  <View>
    {props.user && props.user.map((item) => (
      <Text>{item.name}</Text>
    ))}
  </View>
);

Use it:

const ViewProfile = (props) => (
  <View>
    {props.user && props.user.map((item) => (
      <Text>{item.name}</Text>
    ))}
  </View>
);

const Page = (props) => (
  <View>
    <ViewProfile user={[{
          name: "Thomas King",
          Age: "23",
        }]} />
  </View>
);

Upvotes: 1

D10S
D10S

Reputation: 1559

You did not use "ViewProfile" in "FakeInfo" and vice versa. try this:

ViewProfile

import React, { Component } from "react";
import { Button, View, Text, Image } from "react-native";

const ViewProfile = (props) => (
  <View>
       <Text>{props.user.name}</Text>
  </View>
);

export default ViewProfile;

FakeInfo 

import React, { Component } from "react";
import { Button, View, Text, Image } from "react-native";
import ViewProfile from '{ViewProfilePath}';

export class FakeInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: [
        {
          image: "Food",
          name: "Thomas King",
          Age: "23",
          description: "I am looking to meet new people",
          location: "South Carolina",
        },
      ],
    };
  }

  render() {
    return (
      <View>
        <View>
          {this.state.user.map((item, key) => <ViewProfile user={item} key={key} />)}
        </View>
      </View>
    );
  }
}
export default FakeInfo;

Upvotes: 1

Related Questions