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!!

Have you tried instead of passing the setTextValue directly, to pass a function that calls setTextValue? If they are different components, you can not directly set the other component state — jamomani
– jamomani, Commented Dec 28, 2020 at 11:30

michael · Accepted Answer · 2020-12-28 11:29:54Z

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)}
  ...
/>

answered Dec 28, 2020 at 11:29

michael

4,1733 gold badges15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kenedy Nopriansyah · Accepted Answer · 2020-12-28 11:29:58Z

0

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)}/>

answered Dec 28, 2020 at 11:29

Kenedy Nopriansyah

7394 silver badges6 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related