{React}Reusing a component but changing values depending on the HTML tag it is attached to?

Question

New to React here. I am trying to reuse a component but changing a prop passed to a child component depending on the the component is attached to.

class HowMuchDay extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <p>How much a {this.props.time}</p> <br />
        <h4 style= {h4Style}>{this.props.theValue}</h4>
      </div>
    );
  }
}

class Display extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      submit: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }

  handleInput(event) {
    this.setState({
      input: event.target.value
    });
  }

  handleSubmit(event) {
    this.setState({
      submit: this.state.input,
      input: ""
    });
    event.preventDefault();
  }

  render() {
    const formStyle = {
      position: "relative",
      textAlign: "center"
    }
    
    
    return (
      <div style = {howStyle}>
          <HowMuchDay theValue={this.state.submit} name={props.time}/>
        <form onSubmit={this.handleSubmit} style= {formStyle}>
          <input
            value={this.state.input}
            onChange={this.handleInput}
            placeholder="how much?"
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<Display time="day"/>, document.getElementById("day"));
ReactDOM.render(<Display time="week"/>, document.getElementById("week"));
ReactDOM.render(<Display time = "month"/>, document.getElementById("month"));

Sorry for the mess. So my first thought was maybe I could pass a prop into the ReactDOM.render itself but I don't think that would work. How would I go about this?

score 0 · Answer 1 · answered Jun 24 '22 at 11:16

It is recommended to use ReactDOM.render() only once (Refer this answer https://stackoverflow.com/a/62062296/13542198). I have added a component App and used Display components inside App component.

class HowMuchDay extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <p>How much a {this.props.time}</p> 
        <br>
        <h4 style= {h4Style}>{this.props.theValue}</h4>
      </div>
    );
  }
}

class Display extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      submit: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }

  handleInput(event) {
    this.setState({
      input: event.target.value
    });
  }

  handleSubmit(event) {
    this.setState({
      submit: this.state.input,
      input: ""
    });
    event.preventDefault();
  }

  render() {
    const formStyle = {
      position: "relative",
      textAlign: "center"
    }
    
    
    return (
      <div style = {howStyle} id={this.props.time}>
        <HowMuchDay theValue={this.state.submit} name={props.time}/>
        <form onSubmit={this.handleSubmit} style= {formStyle}>
          <input
            value={this.state.input}
            onChange={this.handleInput}
            placeholder="how much?"
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <Display time="day" />
        <Display time="week" />
        <Display time="month" />
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<div id="app"></div>

{React}Reusing a component but changing values depending on the HTML tag it is attached to?

1 Answers1