React with Semantic UI, Dynamically Add Props

Question

Semantic-UI has this React component, Segment that I am using.

In my application, I am using onMouseOver with Segment, like so:

render() {
    return (
      <Segment onMouseOver={this.handleHover} />
    );
  }

What I want handleHover() to do is to dynamically add semantic UI props to Segment on the mouse over event. I tried doing this with react clone element, and adding a new color prop according to the Semantic UI docs

React docs state:

Clone and return a new React element using element as the starting point. The resulting element will have the original element's props with the new props merged in shallowly.

handleHover() {
    React.cloneElement(Segment, {
      color: "teal"                  //NEWLY ADDED
    });

    //THIS EXECUTES SO EVENT IS TRIGGERING.
    console.log("I'm in here");
  }

So even after cloning the React Component, it still doesn't show the new color attribute when I hover over the Segment.

Question: Is this the right approach to dynamically adding props? If so then why isn't the newly added color being shown. If not then how should I change my code?

Dekel · Accepted Answer · 2017-08-21 23:55:24Z

3

You can add whatever prop value you want to the state of your current component, and change that value onMouseOver:

constructor(props) {
  super(props);

  this.state = {
    propValue: undefined
  }
  this.handleHover = this.handleHover.bind(this);
}

handleHover(event) {
  this.setState({propValue: 'hover'});
}

render() {
  return (
    <Segment onMouseOver={this.handleHover} propName={this.state.propValue} />
  );
}

The value of this.state.propValue will change from undefined to hover, and the Segment component will get that new prop when the onMouseOver callback get called.

You can change propName to color and this.state.propValue to 'teal', based on your example.

edited Aug 21, 2017 at 23:55

answered Aug 21, 2017 at 23:46

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

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

8 Comments

Phil Over a year ago

I'm getting this error: Warning: Unknown prop propValue on <div> tag. Remove this prop from the element.

Dekel Over a year ago

You should use properties that Segment allow :)

Dekel Over a year ago

Read the last note in my answer

Phil Over a year ago

hmm not sure what I'm doing wrong. Below are the two snippets of code

Phil Over a year ago

handleHover(event) { this.setState({ propValue: "color" }); }

|

Collectives™ on Stack Overflow

React with Semantic UI, Dynamically Add Props

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related