如何使用 PrimeReact 的 Button 组件？

Question

I am trying out the javascript map method whilst building a simple calculator.

I am using a list for each row of the calculator and mapping it to a table cell and a prime react button inside it.

I am however getting weird results in the browser.

My code in the component is below and I have screenshotted the output. enter image description here

 import React, { Component } from 'react' import {Button} from 'primereact/button' class Calculator extends Component { constructor(props) { super(props); this.state = { } } render() { const values1 = ["7", "8", "9", "/"] const values2 = ["4", "5", "6", "x"] const values3 = ["1", "2", "3", "-"] const values4 = ["0", ".", "+", "="] const valuesList1 = values1.map(value => <td><Button>{value}</Button></td>) const valuesList2 = values2.map(value => <td><Button>{value}</Button></td>) const valuesList3 = values3.map(value => <td><Button>{value}</Button></td>) const valuesList4 = values4.map(value => <td><Button>{value}</Button></td>) return ( <div className="Middle"> <section className="InputContainer"> <table className="Keys"> <tbody> <tr> {valuesList1} </tr> <tr> {valuesList2} </tr> <tr> {valuesList3} </tr> <tr> {valuesList4} </tr> </tbody> </table> </section> </div> ); } } export default Calculator;

Answer 1

It seems the problem may be coming from the <Button/> component as it renders additional text that seems to be its className within it.

I see you are using the PrimeReact library for the button and according to their documentation , you should enter the button's text via the label prop.

Try changing your code to the following:

import React, { Component } from 'react'
import {Button} from 'primereact/button'

class Calculator extends Component {

  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render() {
    const values1 = ["7", "8", "9", "/"]
    const values2 = ["4", "5", "6", "x"]
    const values3 = ["1", "2", "3", "-"]
    const values4 = ["0", ".", "+", "="]
    const valuesList1 = values1.map(value => <td><Button label={value} /></td>)
    const valuesList2 = values2.map(value => <td><Button label={value} /></td>)
    const valuesList3 = values3.map(value => <td><Button label={value} /></td>)
    const valuesList4 = values4.map(value => <td><Button label={value} /></td>)

    return (
      <div className="Middle">
        <section className="InputContainer">
          <table className="Keys">
            <tbody>
              <tr>
                {valuesList1}
              </tr>
              <tr>
                {valuesList2}
              </tr>
              <tr>
                {valuesList3}
              </tr>
              <tr>
                {valuesList4}
              </tr>
            </tbody>
          </table>
        </section>
      </div>
    );
  }

}

export default Calculator;

Hope this helps