Реагировать JS API Json pull настройки логических значений для отображения

Question

Я выполняю извлечение API в React и имею два логических значения, которые я хочу отобразить их значения. когда я смотрю на консольный журнал, значения говорят "true" и "false", но они не отображаются в пользовательском интерфейсе. Есть ли способ отобразить логические значения «истина» и «ложь»? Новое в JS

 constructor(props) {
            super(props);
            this.state = {
                isLoaded: false,
                items: [],
                callToggleState: false,
            }

        }

    componentDidMount() {
        fetch(url , {
            method: 'get',
            mode: 'cors',
            headers: { 
            'X-API-KEY': API_KEY,
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            }

        })
            .then(res => res.json())
            .then(json => {
              console.log(json);
                this.setState({
                    isLoaded: true,
                    items: json,

                })
            })
        };
////////////////////////////////////////

return (
                <div className="container">
                 <ul>
                    {items.map((dynamicItem) => (
                        <li key={dynamicItem.device_id}> 
<li>
//////////////////////////////////////
</li>

Answer 1

Вы можете использовать условный рендеринг, как предложено в комментариях @xadm.

class App extends React.Component {
  state = {
    items: [
      { device_id: 1, name: "foo", bool: true },
      { device_id: 2, name: "bar", bool: false },
      { device_id: 3, name: "baz", bool: true },
    ]
  }
  render() {
    return (
      <div>
        <ul>
        {
          this.state.items.map( dynamicItem =>
            <li>
            ID: {dynamicItem.device_id}<br />
            Name: {dynamicItem.name }<br />
            Bool: {dynamicItem.bool ? "true" : "false"}
            { /* or maybe? */}
            { /* Bool: {dynamicItem.bool ? "available" : "not in stock"} */}
            </li>
          )
        }
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>