I have a chat box for a stream and I want to have react-portal-tooltips have a dropdown to show a users information when I select their name.
Visual
The way that react-portal-tooltips knows which dom element to put a tooltip under is by taking a element id. When I hardcode the id in everything works just fine. However I can't hard code because as you know chat items are generated dynamically. So I've been trying to create a id dynamical threw the use of props. When I do this however it returns with this error.
Now this only happens when I use variables in the name so the props. I've checked the values for what the output is and they are correct and what I want. This is why I'm confused because if the value is correct but it treats the string as if it is an incorrect data type.
Component Code (React.js)
This is the component for each chat item individually that gets generated.
import React, { Component } from 'react';
import styled from 'styled-components';
import ToolTip from 'react-portal-tooltip';
class ChatItem extends Component {
constructor(props) {
super(props);
this.state = {
isTooltip: false
};
}
render(props) {
const { isTooltip, stampId } = this.state;
const { id, userColor, time, name, message } = this.props;
return (
<Container>
<Content id={`${id}_${name}`}>
<Stamp
userColor={userColor}
onClick={() => this.setState(prevState => ({isTooltip: !prevState.isTooltip}))}>
({time}) {name}
</Stamp>: {message}
</Content>
<ToolTip
active={isTooltip}
position="bottom"
arrow="center"
parent={`#${id}_${name}`}
style={userTooltip}
>
<h1>{name}</h1>
</ToolTip>
</Container>
);
}
}
export default ChatItem;
Oh and before anyone asks the onClick method is correct in fact EVERYTHING works perfectly when I hard code the ID my issue lies inside the ToolTip component with the parent attribute.
