CODEWITHSUNDEEP
reactjs
Ashh
Ashh

Reputation: 46441

pass props to child component on click

I want to pass props to my child component (tabs) on handlesubmitclick of submit button. How i do that ?

import React, { Component } from 'react'
import Tabs from './tabs'
import {connect} from 'react-redux'
import {createParking, securedandparkingtype, numberofspaces, schedule} from '../../../store/actions/wizard'
import {bindActionCreators} from 'redux'

import Formsy from 'formsy-react'
class PlaceContainer extends Component {
  handleSubmit(data) {
    const componentKey = this.props.children.props.location.pathname.split('/')[3]
    if (componentKey === 'location') {
      this.props.createParking(data)
    } else if (componentKey === 'secured') {
      this.props.securedandparkingtype(data)
    } else if (componentKey === 'spaces') {
      this.props.numberofspaces(data)
    } else if (componentKey === 'schedule') {
      this.props.schedule(data)
    }
  }
  render() {
    return (
      <div className="row clearfix">
        <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div className="card">
            <div className="header">
              <h2>MANAGE PARKING PLACE</h2>
            </div>
            <div className="body">
              <div className="row">
                <Tabs/>
                <Formsy.Form onSubmit={this.handleSubmit.bind(this)}>
                {this.props.children}
                <input type="submit" className="btn btn-primary"/>
                </Formsy.Form>
              </div>
            </div>
          </div>
        </div>
      </div>
      )
  }
}
export default PlaceContainer

Upvotes: 1

Views: 159

Answers (1)

Damien Leroux
Damien Leroux

Reputation: 11693

  • Add a state this.state = {myProps: null} to your component.
  • Give tabs your state as props: <Tabs {...this.state.myProps}

When clicking on submit button, update the state with the wanted props:

this.setState({myProps: this.props})

it will update Tabs with new props.

As a result:

    class PlaceContainer extends Component {
        handleSubmit(data) {
            this.setState({myProps: this.props})
        }
        constructor(){
            this.state={{myProps: null}};
        }
        render() {
            return (
                ...
                <Tabs {...this.state.myProps}/>
                ...
            );
        }
    }

Upvotes: 2

Related Questions