How to add a component to a div in react?-CodePudding

I am trying to have an onclick event which, when clicked, removes the button and adds a component to a div.

I have tried to use .append to add the component but it just comes up with text that says [object object]

here is a sample of my code.

class App extends React.Component {
  render() {
    return (
      <div>
        <button id="start-button" onClick={InitialPostition}>
          Start Game
        </button>
        <div id="a8">!!this is where I want to add the component to!!</div>
      </div>
    );
  }
}

const InitialPostition = () => {
  let StartButton = document.getElementById("start-button");
  StartButton.remove();
  document.getElementById("a8").append(<MyComponent />);
};

I assume that you're not supposed to use .append in this situation but if that is the case, what are you supposed to use? if that is not the case, please tell me what else I'm doing wrong.

I am using react 17 if that makes any difference

CodePudding user response：

You can add component by state

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isStart: false };
    }

    const InitialPostition = () => {
        this.setState({
            isStart: true,
        });
    }
    render() {
        return (
            <div>
                {isStart ? (
                    <MyComponent />
                ) : (
                    <button id="start-button" onClick={InitialPostition}>
                        Start Game
                    </button>
                )}
                <div id="a8">!!this is where I want to add the component to!!</div>
            </div>
        );
    }
}

CodePudding user response：

Manipulating DOM is a bad idea in React. You can use states instead.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isStarted: false,
    };
    this.InitialPosition = this.InitialPosition.bind(this);
  }

  InitialPosition() {
    this.setState({ isStarted: true });
  }

  render() {
    return (
      <div>
        {
          this.state.isStarted && (
            <button id="start-button" onClick={this.InitialPostition}>
              Start Game
            </button>
          )
        }
        <div id="a8">
          { this.state.isStarted && <MyComponent /> }
        </div>
      </div>
    );
  }
}

CodePudding user response：

Don't use append to add components when you're using react.js, because React needs to be aware of what components you have or don't have. instead do this:

class App extends React.Component {
  render() {
    constructor(props) {
      super(props);
      this.state = {showComponent:false};
    }
    showComponent() {
      this.setState({showComponent:true})
    }
    return (
      <div>
        <button id="start-button" onClick={showComponent}>
          Start Game
        </button>
        {this.state.showComponent && <CustomComponent/>}
      </div>
    );
  }
}

class CustomComponent extends React.Component {
  render() {
    return (
    <div id="a8">!!this is where I want to add the component to!!</div>
    );
  }
}

React should know what components you have, that is the purpose why React.js was created.