React append component programmatically

Question

I want to create a react component instance and render it in a static place programmatically. My use-case is that I open a sequence of dialogs in an unknown length and when I get a response from a dialog I open the next.

I want to do something like:

const DialogExample = () => ({ question, onAnswer }) =>
  (<div>
    {question}
    <button onClick={onAnswer}>answer</button>
  </div>);

class SomeComponent extends React.Component {
  async start() {
    const questions = await getSomeDynamicQuestions();
    this.ask(questions);
  }

  ask(questions) {
    if (questions.length === 0) {
      // DONE.. (do something here)
      return;
    }

    const current = questions.pop();

    React.magicMethod(
        // The component I want to append:
        <DialogExample 
            question={current} 
            onAnswer={() => this.ask(questions)}
        />,
        // Where I want to append it:
        document.getElementsByTagName('body')[0]);
  }

  render() {
    return (
      <div>
        <button onClick={this.start}>start</button>
      </div>);
  }
}

I know that's not very "react-like", and I guess the "right" way of doing it will be storing those questions in state and iterate over them in "someComponent" (or other) render function, but still, I think that this pattern can make sense in my specific need.

Nicholas Tower · Accepted Answer · 2018-09-25 19:04:31Z

2

Sounds like a case for Portals. I'd recommend doing something like this:

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.body = document.getElementsByTagName('body')[0];
    this.state = {
      questions: [],
    }
  }

  async start() {
    const questions = await getSomeDynamicQuestions();
    this.setState({ questions });
  }

  nextQuestion() {
    this.setState(oldState => {
      const [first, ...rest] = oldState.questions;
      return { questions: rest };
    })
  }

  render() {
    const { questions } = this.state;
    return (
      <div>
        <button onClick={this.start}>start</button>
        {questions.length > 0 && ReactDOM.createPortal(
          <DialogExample
            question={questions[0]}
            onAnswer={() => this.nextQuestion()}
          />,
          this.body,
        )}
      </div>
    );
  }
}

edited Sep 25, 2018 at 19:04

answered Sep 25, 2018 at 18:52

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kutomer Over a year ago

Not exactly my Intention, wanted to know if I can somehow "create a portal outside the render function", something which is more similar to my original code. Anyway, I'm pretty sure it's impossible so I solved it using portals.

Collectives™ on Stack Overflow

React append component programmatically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related