CODEWITHSUNDEEP
javascripthtmlcssreactjsjsx
Corbin Kristek
Corbin Kristek

Reputation: 39

react components rendering horizontally instead of vertically

I am trying to render an array of counters using the counter component dynamically however they get rendered horizontally and I need them rendered vertically.

I am following the react tutorial from codewithmosh.com. I have followed all the instructions and gone over the code countless times. I would also like to note that the instructor is using and older version of react and bootstrap

counter.jsx

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: this.props.value
  };

  handleIncriment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <React.Fragment>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={this.handleIncriment}
          className="btn btn-secondary btn-sm"
        >
          Incriment
        </button>
      </React.Fragment>
    );
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "zero" : count;
  }
}

export default Counter;

Counters.jsx


import React, { Component } from "react";
import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]

  };
  render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <Counter key={counter.id} value={counter.value} selected={true} />
        ))}
      </div>
    );
  }
}

export default Counters;

Upvotes: 0

Views: 1210

Answers (1)

helloitsjoe
helloitsjoe

Reputation: 6529

If you use a div instead of a Fragment inside Counter, your counters will be block elements, and will render vertically.

Upvotes: 1

Related Questions