Displaying multiple props

JavaScript
1

I´m confused as to why this doesn´t work:

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = {value:"",
operators:0}
  this.handleClick = this.handleClick.bind(this);
      }
  handleClick(evt){
 const id=evt.target.id;
 const result= evt.target.value;

this.setState(prevState => ({
  value: `${prevState.value}${result}`.replace(/^0+\B/, "")
}));

if(id==="equals"){
    this.setState({value: math.eval(this.state.value)})
}
else if(id==="clear"){
this.setState({value : 0})  
 }

}



render() {
    return(
            <div id="container">
                <Display value={this.state.value} />
                <Button onClick={this.handleClick} id="zero" value={'0'} />
                <Button onClick={this.handleClick} id="one" value={'1'} />
                <Button onClick={this.handleClick} id="two" value={'2'}/>
                <Button onClick={this.handleClick} id="three" value={'3'} />
                <Button onClick={this.handleClick} id="four" value={'4'} />
                <Button onClick={this.handleClick} id="five" value={'5'} />
                <Button onClick={this.handleClick} id="six" value={'6'} />
                <Button onClick={this.handleClick} id="seven" value={'7'} />
                <Button onClick={this.handleClick} id="eight" value={'8'}  />
                <Button onClick={this.handleClick} id="nine" value={'9'} />
                <Button onClick={this.handleClick} id="decimal" value={'.'} />
                <Button onClick={this.handleClick} id="equals" value={'='} />
                <Button onClick={this.handleClick} id="clear" value={'clear'}  />
                <Button onClick={this.handleClick} id="add" value={'+'} />
                <Button onClick={this.handleClick} id="subtract" value={'-'} />
                <Button onClick={this.handleClick} id="multiply" value={'*'} />
                <Button onClick={this.handleClick} id="divide" value={'/'} />
            </div>
)

}
}

import React, { Component } from 'react';
const Display = (...props) => {
  return (
    		<div>

    			<h2 id="display"> {props.operator} {props.value}</h2>
    		</div>
)};




import React, { Component } from 'react';
const Display = (...props) => {
  return (
    		<div>

    			<h2 id="display"> {props.operator} {props.value}</h2>
    		</div>
)};
2

Well you create a calculator class but I don’t see it used anywhere. Why do you need 2 Displays?

3

Hm? What do you mean? The calculator class is the one that passes props to the display, and basically controls all state and events.

4

Nevermind, solved it!

5

Ok great. Thanks for visiting. :star_struck: