this is currently the code I have in my App.js file

 import './App.css';
    import React, { useState } from 'react';
    
    function UserForm(props) {
      const cantons = [
        { label: 'Basel', value: 'Basel' },
        { label: 'Zurich', value: 'Zurich' },
        { label: 'Geneve', value: 'Geneve'}
      ];
      const [values, setValues] = useState({
        firstName: '',
        lastName: '',
        canton: 'Basel' 
        
      });
    
      const handleChange = e => {
        setValues(oldValues => ({
          ...oldValues,
          [e.target.name]: e.target.value
        }));
      }

      function handleSubmit(event) {
        event.preventDefault();
        //alert('{"firstName": '   values.firstName   '"lastName" : '   values.lastName, JSON.stringify(values.canton));
        alert(JSON.stringify(values.firstName)  '  '  JSON.stringify(values.lastName)  '  '  JSON.stringify(values.canton));
      }
    
      return (
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="firstName">First Name: </label>
            <input
              id="firstName"
              name="firstName"
              value={values.firstName}
              onChange={handleChange}
            />
          </div>
          <div>
            <label htmlFor="lastName">Last Name: </label>
            <input
              id="lastName"
              name="lastName"
              value={values.lastName}
              onChange={handleChange}
            />
          </div>
          <div>
              <label>
                Canton: 
              <select 
              id="canton"
              name="canton"
              value={values.canton}
              onChange={handleChange}
              >
              {cantons.map((canton) => (
                  <option value={canton.value}>{canton.label}</option>
                ))}
              </select>
              </label>
          </div>
          

          <button type="submit">Submit</button>
        </form>           
      );
    }

    
    
    
    export default UserForm;
    

how would i be able to create a Component called Page and wrap it around this component and render it. I tried to understand this and apply it to my current code but i keep getting stuck. this is the normal create-react-app skeleton. i changed the default App() component to the UserForm component. my index.js file looks like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import UserForm from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <UserForm />
  </React.StrictMode>
);

CodePudding user response：

Here I'm providing you the link of sandbox and hopefully it'll help you out to wrap other component into your main component.

https://codesandbox.io/s/restless-shape-bqjut7?file=/src/App.js

Keep Codeing :)

CodePudding user response：

import React from 'react';
        
const Page = ({ children }) => {
  return (
    <div>
      {children}
    </div>
  );
};

export default Page;

And now you can wrap it like that:

import React from 'react';
import ReactDOM from 'react-dom/client';
import UserForm from './App';
import Page from './Page';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Page>
      <UserForm />
    <Page>
  </React.StrictMode>
);

Is that what you meant?

CodePudding user response：

You can do something like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Page from './Page';
import UserForm from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Page>
      <UserForm />
    </Page>
  </React.StrictMode>
);

and then in Page.js:

import React from 'react'

const Page = ({ children }) => {
   return <div>
      <h1>Some Wrapper Page</h1>
      { children }
   </div>
}

export default Page

CodePudding user response：

You need to use the children prop: https://reactjs.org/docs/composition-vs-inheritance.html#containment.

You can create a Page component that receives this prop and then render it inside.

function Page({ children }) {
  return (
    <div>
      {children}
    </div>
  )
}

Instead of using the Page component as <Page />, use <Page> </Page> and everything you put inside it will be placed in the children prop.

root.render(
  <React.StrictMode>
    <Page>
      <UserForm />
    </Page>
  </React.StrictMode>
);

Above, <UserForm /> is placed in the children prop, which is rendered inside the divs of the Page component.