如何使用 React 渲染 html 按钮的新组件 onClick？

Question

I have a component that contains a html button that when clicked on needs to call a function that renders another component and sets the state of the new component to the arguement passed in to the function that returns the new component. I set a state variable that is initialized with the string 'start'. When the html button is clicked the state var should change and the new component needs to be rendered. In my app the page doesn't load and in the minimal reproducible example I tried to make in codesandbox the state variable won't even initialize with the 'start' string

import Member from "./member.js";
import { React, useState } from "react";

const Post = () => {
  const [start, setStart] = useState("start");

  const getProfile = (member) => {
    //    const addr = dispatch({ type: 'ADD_MEMBER', response: member })
    console.log(member);
    setStart(member)
    return <Member user={member}></Member>;
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => getProfile('ssssss')}>Profile</button>
    </div>
  );
};

export default Post;

this is the component I need to render on click

import { React, useState } from "react";
const Member = (props) => {
    const [user, setUser] = useState({});

    return (
      <div class="container">
lolololololololololololololo
      {this.user}
      </div>
    )
  }
  
  export default Member;

sandbox

Answer 1

There are many problems with your code.

1. As stated in the comments you can't use hooks outside of a functional component.
2. By returning a Component from the getProfile function you are not doing anything because this component has no designated place to be rendered in.
3. The start variable is useless in your case because you don't change it anywhere.
4. In your Member component you are using this.user which is wrong in a functional component. This is only used in class components

A somehow working version of your code may be this:

import Member from "./member.js";
import { React, useState } from "react";

const Post = () => {
  const [data, setData] = useState('');

  const getProfile = (member) => {
    //    const addr = dispatch({ type: 'ADD_MEMBER', response: member })
    setData(member);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => getProfile('Johny')}>Profile</button>
      {data && <Member user={data}></Member>}
    </div>
  );
};

export default Post;

import { React, useState } from "react";

const Member = (props) => {
  const [user, setUser] = useState(props.user);

  return (
    <div class="container">
      lolololololololololololololo
      {user}
    </div>
  );
};

export default Member;

Essentially when the button is clicked the value changes and is no longer falsy so the Member Component is rendered and gets the values as props from the data variable.