How can I change the button name?(Javascript)

Question

(This article was written using Google Translate.)

This is App.js.

import React,{useState} from 'react';
import Counter from './components/Counter'

function App() {
  return (
    <div className="App">
      <h1>Code</h1>
      <Counter />
      <Counter />
      <Counter />
    </div>
  );
}
export default App;

This is Counter.js

import React, {useState} from 'react'

const Counter = () => {
    const [count, setCount] = useState(0)
  
  const increment = () => {
    setCount(count + 1)
  }
  return (
      <button onClick={increment}>
        Click {count}
        </button>
  );
}

export default Counter;

This is a chrome screen. Each number is incremented by 1 when the button is pressed.

But that's not what's important.

I want the first button to be named 'click a'. And I want to name the second button 'click b'. And I want to name the third button 'click c'.

I'm learning react for the first time today, so I'm still bad at it. I'd appreciate it if you could tell me how.

Answer 1

If you want to set a,b,c or any other name to your button name use props to pass the value you want to your button

import React, {useState} from 'react'

const Counter = (props) => {
    const { buttonTitle } = props;
    const [count, setCount] = useState(0)
  
  const increment = () => {
    setCount(count + 1)
  }
  return (
     <>
      <h2>{count}</h2>
      <button onClick={increment}>
        Click {buttonTitle}
        </button>
     </>
  );
}
export default Counter;

and

import React,{useState} from 'react';
import Counter from './components/Counter'

function App() {
  return (
    <div className="App">
      <h1>Code</h1>
      <Counter buttonTitle="a" />
      <Counter buttonTitle="b" />
      <Counter buttonTitle="c" />
    </div>
  );
}
export default App;

Answer 2

In your Counter component you can accept props from App Component

import React, {useState} from 'react'

const Counter = (props) => {
    const [count, setCount] = useState(0)
  
  const increment = () => {
    setCount(count + 1)
  }
  return (
      <button onClick={increment}>
        Click {props.name}
        </button>
  );
}

export default Counter;

From your App component you can pass down name prop to Counter Component

import React,{useState} from 'react';
import Counter from './components/Counter'

function App() {
  return (
    <div className="App">
      <h1>Code</h1>
      <Counter name="a" />
      <Counter name="b" />
      <Counter name="c" />
    </div>
  );
}
export default App;

Answer 3

import React,{useState} from 'react';
import Counter from './components/Counter'

function App() {
  return (
    <div className="App">
      <h1>Code</h1>
      <Counter name='a'/>
      <Counter name='b'/>
      <Counter name='c'/>
    </div>
  );
}
export default App;

//counter.js
import React, {useState} from 'react'

const Counter = (props) => {
    const [count, setCount] = useState(0)
  
  const increment = () => {
    setCount(count + 1)
  }
  return (
      <button onClick={increment}>
        Click {props.name}
        </button>
<p>{count}<p/>
  );
}

export default Counter;

Answer 4

I think you should try like this Click {String.fromCharCode(count+97)}

String.fromCharCode(number) it converts number to character & +97 because small alphabets in ASCII starts from 97, for reference check ASCII table. I hope you wanted this answer.