javascript object field input value [object Object] instead of string Reactjs

Question

i'm new here and i came across a doubt, i've created an input button where i can type my value, but unfortunatly it pass me only this value [object object]

That's my screenshot:

My input function:

function ButtonBID(props) {
  return (
    <div class="form__group field">
      <input
        value={props.text}
        onChange={props.setText}
        type="input"
        class="form__field"
        placeholder="Name"
        name="bid"
        id="name"
        required
      />
      <label for="name" class="form__label">
        Bid now!
      </label>
    </div>
  );
}

Where i define the function:

function RankingHome() {
  const [textValue, setTextValue] = useState('');
  return (
    <>
      <Navbar />
      <HeroContainer>
        <HeroBg>
          <VideoBg
            src={Video}
            type="video/mp4"
            autoPlay
            loop
            muted
            playsInline
          />
        </HeroBg>
        <HeroContent>
          <HeroItems>
            <HeroH1>Who will win?</HeroH1>
            <Table />
            <div className="flexati">
              <FirstPositionButton />
              <ButtonBID text={textValue} setText={setTextValue} />
              <Link to="/Pay">
                <i class="far fa-check"></i>
              </Link>
            </div>
          </HeroItems>
        </HeroContent>
      </HeroContainer>
    </>
  );
}

export default RankingHome;

as u can see i've created a const where i pass the value for text and setText, how could i resolve this issue? thanks!!

Answer 1

onChange callback has event parameter from which you can get the changed text.

<input
  value={props.text}
  onChange={e => props.setText(e.target.value)}
  ...
/>

Answer 2

I see your error is you haven't received the data objects in the array

you can to this

<input value={props.text} onChange={(e) => props.setText(e.target.value)}/>