Below i have mentioned two code snippets one for Layout and another one of signup.here i used layout because i am going to use different layout for different pages. here my question is, what things of signup.js are taken by {children} props of Layout???

i am unclear about the use of children props, please give me clarifications

if some more clarification needed about code then please comment.

Layout.js

import React from "react";
import Menu from './Menu';

const Layout = ({ title = "Title", description = "Description",className="col-md-12",children}) => (
  <div>
    <Menu />
    <div className="jumbotron">
      <h2>{title}</h2>
      <p className="lead">{description}</p>
    </div>
    <div className={className} >{children}</div> {/* without children in page there not show any form fields */}
  </div>
  
);


export default Layout;

Signup.js

import React, { useState } from "react";
import { Link } from "react-router-dom"; //example of use in sign in link after signup
import Layout from "../core/Layout";
import { signup } from "../auth";

const Signup = () => {
  const [values, setValues] = useState({
    name: "",
    email: "",
    password: "",
    error: "",
    success: false,
  });

  const handleChange = (name) => (event) => {
    setValues({ ...values, error: false, [name]: event.target.value }); //error false becoz  when we donnot submit any thing  and submit click it gives error but after type again
    //error message disappear
  };

  const { name, email, password, success, error } = values;//to make thing easier we distructure here

  const clickSubmit = (event) => {
    event.preventDefault(); //when button clicked page going for reload we don't want so we use this
    setValues({ ...values, error: false }); //when it is submitted we want set to previous error false
    signup({ name, email, password }).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error, success: false });
      } else {
        setValues({
          ...values,
          name: "",
          email: "",
          password: "",
          error: "",
          success: true,
        });
      }
    });
  };
  const signUpFrom = () => (
    <form>
      <div className="form-group">
        <label className="text-muted">Name</label>
        <input
          onChange={handleChange("name")}
          type="text"
          className="form-control"
          value={name} //when handle chenge happened handleChange method runs is update state what is the value of state that will be value of input field
        />
      </div>

      <div className="form-group">
        <label className="text-muted">Email</label>
        <input
          onChange={handleChange("email")}
          type="email"
          className="form-control"
          value={email}
        />
      </div>

      <div className="form-group">
        <label className="text-muted">Password</label>
        <input
          onChange={handleChange("password")}
          type="password"
          className="form-control"
          value={password}
        />
      </div>

      <button onClick={clickSubmit} className="btn btn-primary">
        Submit
      </button>
    </form>
  );
  const showError = () => (
    <div
      className="alert alert-danger"
      style={{ display: error ? "" : "none" }}
    >
      {error}
    </div>
  );
  const showSuccess = () => (
    <div
      className="alert alert-info"
      style={{ display: success ? "" : "none" }}
    >
      New account is created. please <Link to="/signin">Signin</Link>
    </div>
  );
  return (
    <Layout
      title="Signup"
      description="Sign up to Node React E-commerce App"
      className="container col-md-8 offset-md-2"
    >
      
      {showSuccess()}
      {showError()}
      {signUpFrom()}

    </Layout>
  );
};

export default Signup;

CodePudding user response：

When passing data to a component, there are two methods:

1. Pass data as props - this is used when you are passing known data types
2. Pass data as children - this is used when you need more flexibility

When you pass data as props, you can assign a custom name like this:

<Layout
   title="Signup"
   description="Sign up to Node React E-commerce App"
   className="container col-md-8 offset-md-2"
/>

In the second method, everything within component is called children. In your case, showSuccess(), showError(), signUpFrom() are considered as children, and they will be rendered where you have the children inside <Layout/>

CodePudding user response：

Children prop is an array of components that is Layout's child

Example

<Layout> 
   <ComponentA />
   <ComponentB />
<Layout/>

So the children prop will be an array like this [<ComponentA />,<ComponentB />]