There is a Json with data

{ "food": { "food1": { "id": 1, "name": "Каша", "qty": "3" } , "food2": { "id": 2, "name": "Рис", "qty": "21" } } }

And the logic that goes through the data and renders it.

 import React, { Component } from 'react'; import data from './food.json'; class App extends React.Component { render() { const template = Object.keys(data.food).map(item => <div> <div key={data.food[item].id}>{data.food[item].name} </div> <div>{data.food[item].qty} порций</div> </div> ) return( <div className="hello" style={{color: 'red'}}> {template} </div> ); } } export default App;

As during the cycle, you can check the number of portions and, depending on this, change the content of <div>{data.food[item].qty} порций</div> to the desired 1 portion, for example

    1 answer 1

    Just the same:

     <div>{data.food[item].qty} {1 === data.food[item].qty ? 'порция' : 'порций'}</div>
    • thank! only the === operator is not true, it works simply with comparison == - Clark
    • one
      Yes, either cast the number to the type number: 1 === + data.food [item] .qty In order to understand what this code is converted to after assembly, I advise this service: babeljs.io/en/repl - Undefined