Typescript react fetching undefined objects

Question

I've got some issues feeding my components with sample data. I have created a web api method that returns some json objects:

[ {"id":1,"title":"Master framework","description":"A framework to develope advance UI interfaces for modern web applications","status":"in-progress","color":"#3A7E26"}, {"id":2,"title":"Setup main app solution","description":"An app ","status":"todo","color":"#3A7E26"}, {"id":3,"title":"UI mock creation","description":"Have to be neat a simple","status":"todo","color":"#BD8D31"}, {"id":4,"title":"WebAPI implementation","description":"Based on REST architecture","status":"todo","color":"#BD8D31"} ]

My components: Dashboard:

interface IDashboardState {
    Cards: Card[];
}

export class Dashboard extends React.Component<RouteComponentProps<{}>, IDashboardState> {
    constructor() {
            super();
            this.state = { Cards: [] };
    }

    public componentDidMount() {

        const baseUrl = 'http://localhost:51429/Home/Cards';
        var cardEntities: CardEntity[];

        fetch(baseUrl)
            .then((response) => (response.json())
                .then((responseData) => {
                    console.log(responseData.length);
                    this.setState({ Cards: responseData })
                })
                .catch((error) => {
                    console.log("Error loading data", error);
                }));

    }

    render() {
        return (
            <div className="app">
                <List Id='todo' Title="To do" Cards={
                    this.state.Cards.filter((card) => card.props.Status === "todo")}
                     />
                <List Id='in-progress' Title="In progress" Cards={
                    this.state.Cards.filter((card) => card.props.Status === "in-progress")}
                     />
                <List Id='done' Title="Done" Cards={
                    this.state.Cards.filter((card) => card.props.Status === "done")}
                     />
            </div>
        );
    }
}

List:

interface IListProps {
    Id: string;
    Title: string;
    Cards: Card[];
}
export class List extends React.Component<IListProps, {}> {
    render() {
        var cards = this.props.Cards.map((card => {
            return <Card key={card.props.Id}
                Id={card.props.Id}
                Title={card.props.Title}
                Description={card.props.Description}
                Status={card.props.Status}
                Color={card.props.Color}
                />
        }))

        return (
            <div className="list">
                <h1>{this.props.Title}</h1>
                {cards}
            </div>
        );
    }
}

Card:

interface ICardProps {
    Id: number;
    Title: string;
    Description: string;
    Status: string;
    Color: string;
}

interface ICardState {
    showDetails: boolean;
}


export class Card extends React.Component<ICardProps, ICardState> {
    constructor(props: ICardProps) {
        super(props)
            this.state = {
        showDetails: false
    };
}

toggleDetails() {
    this.setState({showDetails: ! this.state.showDetails})
}

render() {

    let cardDetails;
    if (this.state.showDetails) {
        cardDetails = (
            <div className="card_details">
                <CheckList CardId={this.props.Id}

                />
            </div>
        );
    }

    return (
        <div className="card">
            <div>
                <div className="card_title" onClick={this.toggleDetails.bind(this)}>
                    {this.props.Title}
                </div>
                <div className="card_description">
                    {this.props.Description}
                </div>
                {cardDetails}
            </div>
        </div>
    );
}

I thought react while fetching would automatically assign my json to Card object, but it leaves them as undefined and no content is rendered. Any ideas why?

Thanks for help in advance!

Update your filter calls to filter(card => card.status === "todo") and the mapping within List render to be Title={card.title} — arpl
– arpl, Commented Dec 11, 2017 at 22:30

arpl · Accepted Answer · 2017-12-13 00:07:34Z

1

The response data are not mapped correctly to props.

Dashboard

interface CardData {
  id: string;
  title: string;
  description: string;
  status: string;
  color: string;
}

interface IDashboardState {
  cards: CardData[];
}

export class Dashboard extends React.Component<RouteComponentProps<{}>, IDashboardState> {
  constructor() {
    super();
    this.state = { cards: [] };
  }

  public componentDidMount() {

    const baseUrl = 'http://localhost:51429/Home/Cards';
    var cardEntities: CardEntity[];

    fetch(baseUrl)
      .then((response) => (response.json())
        .then((responseData) => {
          console.log(responseData.length);
          this.setState({ cards: responseData as CardData[] })
        })
        .catch((error) => {
          console.log("Error loading data", error);
        }));

  }

  render() {
    return (
      <div className="app">
        <List Id='todo' Title="To do" Cards={
          this.state.cards.filter((card) => card.status === "todo")}
        />
        <List Id='in-progress' Title="In progress" Cards={
          this.state.cards.filter((card) => card.status === "in-progress")}
        />
        <List Id='done' Title="Done" Cards={
          this.state.cards.filter((card) => card.status === "done")}
        />
      </div>
    );
  }
}

List

interface IListProps {
  Id: string;
  Title: string;
  Cards: Card[];
}

export class List extends React.Component<IListProps, {}> {
  render() {
    var cards = this.props.Cards.map(card => {
      return
        <Card key={card.id}
          Id={card.id}
          Title={card.title}
          Description={card.description}
          Status={card.status}
          Color={card.color}
        />
    })

    return (
      <div className="list">
        <h1>{this.props.Title}</h1>
        {cards}
      </div>
    );
  }
}

edited Dec 13, 2017 at 0:07

answered Dec 11, 2017 at 22:36

arpl

3,6433 gold badges21 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

krezeee Over a year ago

In Dashboard render() function, I cant change from card.props.status to card.status, as the child component take in props a Card object (which already is a react component class extension)

arpl Over a year ago

Your Dashboard state property Cards should have the shape of an array containing objects shaped like the JSON response. Call it CardData so you don't mix it up with Card component. Hope this is clear.

krezeee Over a year ago

still doesnt render card components

Collectives™ on Stack Overflow

Typescript react fetching undefined objects

1 Answer 1

Dashboard

List

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Dashboard

List

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related