React Form: Input Data Won't Display

Question

Every time I click the button a post is being created and displayed

But the input data isn't showing up

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    dataArr : [],
    isClicked: false,
    title : '',
    img : ''
  }

  handleSubmit = (e) => {
    e.preventDefault()
  }

  handleChange = (e) => {
    [e.target.name] = e.target.value
  }

  handleClick = () => {
    const copyDataArr = Object.assign([], this.state.dataArr)

    copyDataArr.push({
      title : this.state.title,
      img : this.state.img
    })

    this.setState({
      isClicked : true,
      dataArr : copyDataArr
    })

  }

  render() {
    console.log(this.state.title)
    return (
      <div>
          <form onSubmit={this.handleSubmit}>
          <input type="text" name="title"  placeholder="Title.." onChange={this.handleChange}/>
          <input type="text" name="img" placeholder="Image.." onChange={this.handleChange}/>
          <button onClick={this.handleClick}>SUBMIT</button>
          </form>
          { this.state.isClicked ? 
              this.state.dataArr.map(
                (post, index) => { 
                  return(
                    <div class="div">
                      <h1>title: {post.title}</h1> 
                      <img src={post.img} alt="ohno"/>
                    </div> 
                  )

                }
              ) 
              : null }
      </div>
    )
  }
}

Created an empty array on state and copied the array and pushed in the input values. What am I doing wrong?

Need the onChange to work and the input data to display

Trying to learn forms in react. Hope someone can help out

Cat_Enthusiast · Accepted Answer · 2019-07-29 07:07:15Z

1

Your handleChange function is not updating state with the data you enter to the inputs. Looks like you might have forgotten to call this.setState(). Try this :

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

Also here is a sandbox with the working code: https://codesandbox.io/s/distracted-darkness-xp3nu

answered Jul 29, 2019 at 7:07

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

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

5 Comments

Cat_Enthusiast Over a year ago

That doesn't appear to be the case in the code you posted above @Parsa. As I've suggested, I'm able to get your posts to display correctly by just adjusting the handleChange()

Parsa Over a year ago

oh i see the problem, it was very stupid, i didnt set state, thanks man

Cat_Enthusiast Over a year ago

No worries! @Parsa You literally had everything else working though which is a good sign. :)

Parsa Over a year ago

did you change anything else though? doing that still didnt work on my code although your sandbox code is working just fine

Cat_Enthusiast Over a year ago

I updated the handleChange. That's all that was needed to get your data to show up. Additionally I made it so the value prop of each input matches a field in the state, which just makes it easier to clear the forms, which is not necessary. Other than that no.

Muljayan · Accepted Answer · 2019-07-29 07:14:04Z

0

You have to add a value attribute to the input tag and pass the state value.

<input type="text" name="title" value={this.state.title}  placeholder="Title.." onChange={this.handleChange}/>

Your handle change function should be as follows

  handleChange = (e) => {
    this.setState({[e.target.name] : e.target.value});
  }

edited Jul 29, 2019 at 7:14

answered Jul 29, 2019 at 7:07

Muljayan

3,92611 gold badges36 silver badges58 bronze badges

2 Comments

Parsa Over a year ago

when i did that, i was unable to even type on the input anymore? it wouldnt let me type on the input after doing that

Cat_Enthusiast Over a year ago

Impressive deduction.

Collectives™ on Stack Overflow

React Form: Input Data Won't Display

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related