Search code examples
reactjsjsxreact-dom

How to show multiple values in same field Reactjs

I want to show mouse coordinates on a textbox. By doing this

<TextField
      id="t2"
      floatingLabelText={this.state.mouseX}
/>

I get the mouse X coordinate

On the same field along with this X coordinate i also want to show the Y coordinate. And i am writing this

<TextField
          id="t2"
          floatingLabelText={this.state.mouseX, this.state.mouseY}
/>

which is only giving me the Y coordinate.

How can i show both values in the SAME FIELD ?

Solution

  • floatingLabelText likely takes a string, so it's up to you to combine the values into a single string:

    floatingLabelText={`${this.state.mouseX}, ${this.state.mouseY}`}