Injecting Component name into tag in React

user_2102840 0
Viewed 14808

This has been asked before, but the solutions don't seem to be working for me... maybe because I am conditionally rendering? The idea is that I have choices for the user to click on, and then the appropriate component is rendered onClick. So I want to inject the name of the component into the tag conditionally when the user makes a choice. Here is a fairly minimal example:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import RaisedButton from 'material-ui/RaisedButton';
import { setData } from '../../actions/data';
import * as mathUtils from '../../mathUtils';

class MyParentClass extends Component {
  constructor(props) {
    super(props);
    this.handleChoice = this.handleChoice.bind(this);
  }
  handleChoice({ topic, user }) {
    const id = `${Date.now()}-${mathUtils.uuidv4()}`;
    this.props.setData({ topic, id, user });
  }
  render() {
    const { id, currentUser } = this.props;
    const Topic = this.props.topic;
    return (
      id
        ? <Topic />
        : <RaisedButton
            role="button"
            primary={true}
            label="NumberOne"
            onClick={() => this.handleChoice({
                topic: 'NumberOne',
                user: currentUser
              })
            }
          />
          <br />
          <RaisedButton
            role="button"
            primary={true}
            label="NumberTwo"
            onClick={() => this.handleChoice({
                topic: 'NumberTwo',
                user: currentUser
              })
            }
          />
    );
  }
}

MyParentClass.propTypes = {
  id: PropTypes.string,
  topic: PropTypes.string,
  setData: PropTypes.func.isRequired,
  currentUser: PropTypes.object.isRequired
};

MyParentClass.defaultProps = {
  id: null,
  topic: null
};

export default connect(
  ({ session, data }) => ({
    currentUser: session.currentUser,
    id: data.id,
    topic: data.topic
  }),
  { setData }
)(MyParentClass);

I get two different errors in the console for this code that seem to be at odds with each other. The first is Warning: <NumberOne /> is using uppercase HTML. Always use lowercase HTML tags in React. and the second is Warning: The tag <NumberOne> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

I'm reasonably convinced I'm just not applying the correct logic to my application, but I'm not sure how else to accomplish the desired behavior.

react-redux reactjs javascript
3 Answers

You can directly set the element instead of string. First import your components like 

import NumberOne from '../../NumberOne';

Then, in your onClick set the respective component like

onClick={() => this.handleChoice({
            topic: NumberOne,
            user: currentUser
          })

The rest of your code as it is with the above changes should work for you.

user_10097500

I believe that in your case topic should be a jsx function, not a string.

For example, pseudocode: 

// Outer render
render() {
    const topicOne = (props) => (<div>Topic One</div>);
    const topicTwo = (props) => (<div>Topic Two</div>);

    return (<MyParentClass topic={topicTwo} />);
}
user_28870220

Your react-router-dom version (beta.6) is incompatible with mdbreact library. If you install stable version ^5.3.3 everything will work fine.

Here are some links with react-router-dom releases and docs:

https://libraries.io/npm/react-router-dom

user_150535980
Related