0

I'd like to pick from headers h1-h6 using a prop, and then insert styles and text into the header. I have now:

import React from 'react';
import ReactLoading from 'react-loading';

import MyComponent from '../main/MyComponent';



export default class THDSpinner extends {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        let header_size = `h${this.props.size}`;

        return (
            <div className="card col-md-12">
              <span><h2 style={{fontWeight: "bold", fontSize: "25px", color: "#F96302"}}>Just a moment...Your request is being processed.</h2>
              <ReactLoading type="cylon" color="#F96302" /></span>
            </div>
        )
    }
}

THDSpinner.defaultProps = {size: 2}

I then realized I've never had to automate picking element types before and don't even know where to start. Can this be done with React, and how?

halfer
  • 19,824
  • 17
  • 99
  • 186
codyc4321
  • 9,014
  • 22
  • 92
  • 165

1 Answers1

1

sure -- just create the element dynamically and compose it.

render(){
  const Tag = `h${this.props.size}`


  return <Tag>Just a moment...</Tag> 
}

...

<Foo size={2} />
Dimitar Christoff
  • 26,147
  • 8
  • 50
  • 69