Reactjs style component with document.getElementById

Question

Hello i'm trying to highlight the Items, with the same Id. Im using document.getElementById but i don't really know ho to do it. does anyone can help me? I'm iterating over an Array of Objects from my Database....

return(
      <div className='list'>
      <Row>
      {this.state.cards.map((card) => {
        return(<Card 
          onHover={()=>{
            const highlighted =   document.getElementById(card.id)
            highlighted.style={{backgroundColor: "blue"}}
          }} 
          cardHeading={card.cardHeading} cardDesc={card.cardDesc}
           cardPreis={card.cardPreis} cardId={card.id} bewertung={card.cardBewertung}
           image={card.cardImage}/>)
          })
      }

      </Row>
      </div>
    )

.... My GoogleMaps Component:

<Marker   onClick={props.show}
          position={{ lat: marker.latitude + 0.00201, lng: 
          marker.longitude + 0.00201}}
          id={marker.id}
          />

id={marker.id} and cardId={card.id} are the same and i want to highlight one of them when hovering over them ... thanks in advance.

score 1 · Answer 1 · answered Nov 27 '17 at 12:04

React gives you the ability for a component to control itself dynamically. So make that Card into a separate component with all of the logic you need using this.setState to control the current style of your Card. I can't test this, but this is the general idea:

return(
  <div className='list'>
    <Row>
      {this.state.cards.map((card) => <CustomCard card={card}/>)}
    </Row>
  </div>
)

class CustomCard extends Component {
  constructor() {
    super()
    this.state = {
      defaultColor: true
    }
  }

  handleClickColorChange() {
    this.setState({defaultColor: !this.state.defaultColor})
  }

  render() {
    const {card} = this.props
    const customStyle = {
      backgroundColor: 'blue'
    }

    return (
      <Card
        onHover={() => this.handleClickColorChange()}
        style={this.state.defaultColor ? null : customStyle}
        cardHeading={card.cardHeading} cardDesc={card.cardDesc}
        cardPreis={card.cardPreis} cardId={card.id} bewertung={card.cardBewertung}
        image={card.cardImage}
      />
   )
  }
}

Reactjs style component with document.getElementById

1 Answers1