javascript React map이차원배열및객체로표시（array and object）

Posted 2021-05-03

import React, { Component } from "react";

function getNumbers() {}

class NumberBaseball extends Component {
  state = {
    result: "",
    value: "",
    answer: getNumbers(),
    tries: []
  };

  onSubmitForm = () => {};

  onChangeInput = () => {};

  render() {
    return (
      <>
        <h1>{this.state.result}</h1>
        <form onSubmit={this.onSubmitForm}>
          <input
            maxLength={4}
            value={this.state.value}
            onChange={this.onChangeInput}
          />
        </form>
        <div>시도: {this.state.tries.length}</div>
        <ul>
          {[["사과", "맛있다"], ["바나나", "맛없다"]].map(v => (
            <li>
              <b>{v[0]}</b> - {v[1]}
            </li>
          ))}
        </ul>
      </>
    );
  }
}

export default NumberBaseball;

import React, { Component } from "react";

function getNumbers() {}

class NumberBaseball extends Component {
  state = {
    result: "",
    value: "",
    answer: getNumbers(),
    tries: []
  };

  onSubmitForm = () => {};

  onChangeInput = () => {};

  render() {
    return (
      <>
        <h1>{this.state.result}</h1>
        <form onSubmit={this.onSubmitForm}>
          <input
            maxLength={4}
            value={this.state.value}
            onChange={this.onChangeInput}
          />
        </form>
        <div>시도: {this.state.tries.length}</div>
        <ul>
          {[
            { fruit: "사과", taste: "맛있다" },
            { fruit: "감", taste: "시다" }
          ].map(v => (
            <li>
              <b>{v.fruit}</b> - {v.taste}
            </li>
          ))}
        </ul>
      </>
    );
  }
}

export default NumberBaseball;