CODEWITHSUNDEEP
javascriptreactjs
bunny
bunny

Reputation: 2027

React similar component design

Suppose I want to create a series of pages which only differs in body part and their header and footer are similar. The bodies are various forms. The footer are some buttons such as save and cancel buttons. I was thinking to create generic page that contains header and footer and inject different bodies such as below(pseudo code):

<page body={body1()} />
<page body={body2()} />

const page = (body) => {
  <header />
  {body}
  <footer />
}

const header = () => {
  return <h1>Header</h1>;
}

const footer = () => {
return (
  <div>
    <button>Save<button>
    <button>Cancel<button>
  </div>
 );
}

const body1 = () => {
   //several input, selector
}

const body2 = () => {
   //several input, selector
}

My question is if body and footer is separate, when the save button is clicked, how does the page knows what information in fields of body needs to be saved?(The page does not have the information in body or how does the page know what information it needs to know in the body) Is it the right approach/pattern for this type of problem by extracting body as a separate component?

Upvotes: 0

Views: 56

Answers (1)

ClownBaby
ClownBaby

Reputation: 478

You can have the parent pass down a function to the footer that is placed in the buttons onClick()-function. Then you also pass down that function to the body and make the form save the relevant information.

The button does not need to know what it is saving, only that it is clicked.

Upvotes: 1

Related Questions