Passing Components as children through a main Form component

Philip

I'm relatively new to React and redux. Loving it but I'm having problems passing components into other components as children and getting them to display. I'm currently working with a massive Form.js file with all the panels there but it would be easier to maintain to have them as separate components.

I have a large client data form. Each section for the form is in a tab/panel format. It would be great to be able to have each tab panel as a separate component, but I can't seem to get each panel to show by passing them through as children.

Page.js

// file imports....

// constructor, handleChange, handleSubmit, 


render() {
    return <div className="page">
        <div className="page-content">

            <Form {...this.state}
                onChange={this.handleChange} onSubmit={this.handleSubmit} >

                <Details {...this.state} onChange={this.handleChange} />

            </Form>

        </div>
    </div>
}
}

export default Page

Form.js

// file imports....




const Form = ({ client, errors, onChange, onSubmit }, props) => {

  function handleChange(name, value) {
    if (value !== client[name]) {
      onChange(name, value)
    }
  }

  return <form onSubmit={e => onSubmit(e)}>

        <Heading client={client} />    
        <TabNavigation />  

        <div className="tab-content">


          {props.children}  



          </div>
        </form>

}

Form.displayName = displayName
Form.propTypes = propTypes

export default Form

Details.js

// file imports....



const Details = ({ client, errors, onChange }) => {

    function handleChange(name, value) {
        if (value !== client[name]) {
            onChange(name, value)
        }
    }
        return(
        <div className="tab-pane active animation-slide-left" id="details" role="tabpanel">


                  ............   more form data  .........
            </div>

        </div>




    )

}

Details.displayName = displayName
Details.propTypes = propTypes

export default Details;
Anis Smail

You need to use the ... syntax to get the rest of the props properly.

const Form = ({ client, errors, onChange, onSubmit , ...props}) => {

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Passing form to AngularJS component for validation

Passing params to children components in Knockout

Passing a contenteditable element through form?

Passing props to children components with react-router v4

Passing data from service to Component --> Child Components

map through nested children components in react

vue component is not passing events through

Passing props from a root component through a BottomTabNavigator

Passing props to a component through state

The form in one Component gets submitted by other Components

Passing a function through three levels of components (i.e. calling a function from a grandchild component)

Angular get status of all children components from parent component

Passing slots through from Parent to Child Components

Multiple Vue components inside Main component

Passing data up through nested Components in React

Reusable component not seen by children routes components

Send information from multiple children components to one parent component in React

React Props not passing down to children components?

can you pass a component through props to children

React / Redux Form passing props to children

Passing a Varible through a form

Rails passing form ID param through form

Main component not showing other components

Passing down React Components dynamically through props?

Passing data through angular components with highcharts

Passing main component state to another component error

Material UI Tooltip Component overwriting className on children components

Passing form data between functional components

Passing props from parent component to child components

TOP Ranking

HotTag

Archive