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 ponent is rendered onClick. So I want to inject the name of the ponent 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 ponent, 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 acplish the desired behavior.

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 ponent is rendered onClick. So I want to inject the name of the ponent 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 ponent, 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 acplish the desired behavior.

• javascript
• reactjs
• react-redux

• You are missing open tag for div.Is that a typo? – bennygenel Commented Oct 3, 2017 at 15:59

3 Answers 3

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

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

Then, in your onClick set the respective ponent like

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

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

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} />);
}

Your react-router-dom version (beta.6) is inpatible 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