Breaking News: Grepper is joining You.com. Read the official announcement!

presentational and container components

Silly Shrike answered on February 5, 2022 Popularity 6/10 Helpfulness 2/10

answer presentational and container components

related container vs presentational components

presentational and container components

Comment

///presentational component

import React from "react";

export default function DogImages({ dogs }) {
  return dogs.map((dog, i) => <img src={dog} key={i} alt="Dog" />);
}



/// container component

import React from "react";
import DogImages from "./DogImages";

export default class DogImagesContainer extends React.Component {
  constructor() {
    super();
    this.state = {
      dogs: []
    };
  }

  componentDidMount() {
    fetch("https://dog.ceo/api/breed/labrador/images/random/6")
      .then(res => res.json())
      .then(({ message }) => this.setState({ dogs: message }));
  }

  render() {
    return <DogImages dogs={this.state.dogs} />;
  }
}
Open CodeSandbox

Popularity 6/10 Helpfulness 2/10 Language whatever

Source: www.patterns.dev

Tags: components whatever

Link to this answer
Share Copy Link

Contributed on Sep 12 2022

Silly Shrike

0 Answers Avg Quality 2/10

Closely Related Answers

container vs presentational components

Comment

// container - no markup, stateful, pass data and actions down, knows about configs, smart, controller
// presentational - markup, get props, stateless, doesnt know about configs, dumb, view

Popularity 7/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: whatever components wh

Link to this answer
Share Copy Link

Contributed on Feb 05 2022

paramjeetdhiman

0 Answers Avg Quality 2/10

presentational and container components

Contents

More Related Answers

presentational and container components

Closely Related Answers

container vs presentational components

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.