Реагировать Pinpad с кнопками ввода

Question

Я новичок в реакции, и я пытаюсь создать контактную площадку, используя команду реакции, где у меня есть кнопки для ввода чисел, на экране, где максимальное количество цифр равно 4. Я уже сделал эту логику.Что я хочу сделать дальше, так это то, что когда я нажимаю мою цифру, номер скрывается и появляется *.Я не использую Ввод в моем HTML.

Так что это мой компонент Button:

export const Button = ({ children, handleClick})=> (
    <div 
        className={`button-container ${children}`}
        onClick={() => handleClick(children)}>
        {children}
    </div>
)

Это мой компонент Screen:

export const Screen = props => (
   <div className="input">
   {props.screen}
   </div>
)

И это мой главныйПриложение:

class App extends Component {
  //extend component class
  constructor(props) {
    super(props);

    this.state = {
      screen: [],
      sucess: 'SUCESS',
      error: 'ERRO',
      tries: 3, 
      password: ''
    }
  }

  //I tried using an input on the screen component
  //but this worked
  //not sure if "the react way"
  addPassword = val => {
     return this.state.screen.length > 3 ? '' : this.setState({screen: this.state.screen + val});
  }

  /*
  pin = '1234';
  validadePassword = (addPassword, pin) => {
    //return addPassword === pin ? this.state.screen.type === 'password' : this.state.screen.type === 'number';
    console.log(pin);
  }*/

  render() {
    return (
      <div className="App">
        <h1>Pin pad</h1>
        <h2>Addcode!</h2>
        <div className="container">
          <Screen
            screen={this.state.screen}

            length = {5}>
          </Screen>
          <div className="row justify-content-md-center">
            <Button handleClick={this.addPassword}>7</Button>
            <Button handleClick={this.addPassword}>8</Button>
            <Button handleClick={this.addPassword}>9</Button>
          </div>
          <div className="row justify-content-md-center">
            <Button handleClick={this.addPassword}>4</Button>
            <Button handleClick={this.addPassword}>5</Button>
            <Button handleClick={this.addPassword}>6</Button>
          </div>
          <div className="row justify-content-md-center">
            <Button handleClick={this.addPassword}>1</Button>
            <Button handleClick={this.addPassword}>2</Button>
            <Button handleClick={this.addPassword}>3</Button>
          </div>
          <div className="row justify-content-md-center">
              <Button handleClick={this.addPassword} class="col align-self-center">0</Button>
            </div>
          </div>
        </div>
    );
  }
}

export default App;

Я был бы очень благодарен, потому что я пытаюсь изучить эту библиотеку и как она работает.

Answer 1

Поскольку ваше значение screen является списком, вы можете map список с символом * и их join в виде строки.Пример:

let digits = props.screen.map(digit => '*').join('');
return <div className="input">
    {digits}
</div>;