Реагировать, ошибка в функции сравнения if else, объявленной вне основной функции

Question

Приведенная ниже функция Rating всегда выдает вывод как one вместо ожидаемых результатов как two / three при передаче различных data параметров

Ссылка на песочницу https://codesandbox.io/s/eloquent-fast-jur3h

import React from "react";

function Rating({ data }) {
  // This function indent to display number 0 to 3 based on 'data'
  if (data <= 0) {
    return <div>0</div>;
  } else if (0 < data <= 1) {
    return <div>one</div>;
  } else if (1 < data <= 2) {
    return <div>two</div>;
  } else if (2 < data <= 3) {
    return <div>three</div>;
  } else {
    return <div>No Rating</div>;
  }
}

function Productdetails() {
  return (
    <div> <Rating data={3} /> </div>
  );
}

export default Productdetails;

Answer 1

Вы можете упростить его следующим образом

import React from "react";

function Rating({ data }) {
  map = {
    1: 'one',
    2: 'two',
    3: 'three'
  }
  // This function indent to display number 0 to 3 based on 'data'
  var out = map[data] || 'No rating'

  return <div>{out}</div>
}

function Productdetails() {
  return (
    <div>
      {" "}
      <Rating data={3} />{" "}
    </div>
  );
}

export default Productdetails;

Answer 2

function Rating({ data }) {
  // This function indent to display number 0 to 3 based on 'data'
  if (data <= 0) {
    return <div>0</div>;
  } else if (0 < data && data <= 1) {
    return <div>one</div>;
  } else if (1 < data && data <= 2) {
    return <div>two</div>;
  } else if (2 < data && data <= 3) {
    return <div>three</div>;
  } else {
    return <div>No Rating</div>;
  }
}

ваши операторы if else неверны (я думаю, что какое-то расширение babel допускает такие проверки, но я не уверен)