props dont get passed when submitting Form

Question

I'm trying to pass the Value of my Input Form to my AppMap Component, it centers the Map on the prop city. It works when I hardcode the state of searchValue, but when i submit the form it does not pass the state as a prop to the AppMap Component. Does anyone know what i'm doing wrong. Thanks in advance.

class Map extends Component{
  constructor(){
      super()
      this.state = {
        value: ' ',
        searchValue: "London"
      };

      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }



handleChange(event) {
       this.setState({value: event.target.value});
     }

handleSubmit(event) {
    const value = this.state.value
       event.preventDefault();
       this.setState ({
         searchValue: value
       })
 }


    render(){
        return(
            <div className='map'>
                <h1>The Map</h1>

                    <AppMap city={this.state.searchValue} />

                    <Grid>
                    <Row className="show-grid">
                        <FormGroup  value={this.state.value} onChange={this.handleChange} name='cardHeading' controlId="formControlsTextarea">
                          <Col xs={8} md={8}>
                            <FormControl type="text" placeholder="title" />
                          </Col>
                          <Col xs={4} md={4}>
                            <Button onClick={this.handleSubmit} type="submit">Submit</Button>
                          </Col>
                        </FormGroup>
                    </Row>
                  </Grid>
            </div>
          )
        }
    }

export default Map

Lando-L · Accepted Answer · 2017-10-04T23:38:03.090

1

Did you already check if the state of Map and the props of AppMap update correctly? For example with react dev-tools. If so then the AppMap Component just might be the problem.

First of all I would wrap the FormGroup Component with a <form onSubmit={this.handleSubmit}></form> tag and remove the onClick={this.handleSubmit} from the Button Component. (Check React Form example at https://reactjs.org/docs/forms.html).

Then, if the state and props update correctly, but the centering of the AppMap Component does not work, you might have to center the map yourself using one of the AppMap update lifecycle methods.

edited Oct 04 '17 at 23:38

answered Oct 04 '17 at 15:01

Lando-L

843
6
19

thank you i installed the react dev-tools and then i was able to see, that the component updates it's state, but nothing changed, because i wrote the fetch function of my AppMap Component in the wrong lifecycle method – HarryTgerman Oct 04 '17 at 16:05
If this helped, can you please set this as a useful answer? – Lando-L Oct 04 '17 at 16:11

score 0 · Answer 2 · answered Oct 04 '17 at 15:28

0

the handleChange function should be in the FormControl not in the FormGroup

<FormControl type="text" value={this.state.value} onChange={this.handleChange} name='cardHeading' placeholder="title" />

answered Oct 04 '17 at 15:28

James Solomon Belda

936
1
7
14

props dont get passed when submitting Form

2 Answers2