Adding custom component with an onClick icon - react-select

Question

I'm currently using react-select and I want to create a custom Option component that has an icon that allows interaction (e.g. adding to favourites). I've tried doing
const Option = props => {
return <components.Options {...props}>
<p>Text</p>
<IonIcon onClick={console.log("clicked")} />
</components.Options>
}
Doing this does not allow the IonIcon to be clicked and the onClick behaves like the default Option.
I have also tried:
<div>
<p>Text</p>
<IonIcon onClick={console.log("clicked")} />
</div>
as the return. While doing this, the default Option behaviour is removed, it does not allow the IonIcon to be clicked either.
For both methods I've tried, opening the menu will trigger the onClick, i.e. print "clicked", and clicking the IonIcon doesn't trigger anything.
I've set the zIndex of the icon to 10000 as well.
Thanks in advance! It'll be really cool to include the ability to favourite in select!

Answer 1

Before Clarifications
If I didn't understand wrong you want your new Component to have some kind of text (maybe passed by prop?) and the Icon clickable, after the click the Icon should change color.
For the Icon I'm using react-icons .
App.js
import React,{useState} from 'react';
import { IoStar } from "react-icons/io5";
function App() {
return (
<div style={{textAlign:"center"}}>
<ul style={{listStyleType:"none"}}>
<Option value="Location 1"/>
<Option value="Location 2"/>
<Option value="Location 3"/>
<Option value="Location 4"/>
<Option value="Location 5"/>
</ul>
</div>
);
}
const Option = (props) =>
{
let {value} = props; //Value taken from props
const defaultStyle = //Default Logo Style -> Cursor: Pointer is used to make the cursor become a "hand" when "hover" on the icon
{
cursor:"pointer",
fontSize:"40px"
}
const starPressed = () => //Function triggered on the "On Click"
{
if(isYellow)
setIconStyle(defaultStyle); //Color Default
else
setIconStyle({...iconStyle,color : "#f5d442"}); //Color Change
setIsYellow(!isYellow);
}
const [iconStyle,setIconStyle] = useState(defaultStyle); //UseState
const [isYellow,setIsYellow] = useState(false); //UseState
//return
return(
<li>
<span style={{fontSize:"40px"}}>{value}</span> <span><IoStar onClick={starPressed} style={iconStyle}/></span>
</li>
)
}
export default App;
Basically I'm using useState to re-render after the : iconStyle changes.
I believe it is what you were searching for.
EDIT After Clarifications
This is a BIG BIG work-around, hope it would help you.
I'm sure there are better ways to pass data and other things, and I'm still looking for them, but this is my first approach to it.
(Never used react-select).
Hope it helps.
import React,{useState} from 'react';
import { IoStar } from "react-icons/io5";
import Select from "react-select";
function App() {
const [isYellow,setIsYellow] = useState(
[
false,
false
]
); //UseState
const options =
[
{
value:0,
label:"Option 1",
isYellow: isYellow,
setIsYellow: setIsYellow
},
{
value:1,
label:"Option 2",
isYellow: isYellow,
setIsYellow: setIsYellow
}
];
return (
<>
<Select closeMenuOnSelect={false} options={options} formatOptionLabel={FormatOptionLabel}/>
</>
);
}
const FormatOptionLabel = ({ value, label,isYellow,setIsYellow}) =>
{
const style1 =
{
zIndex:"100",
cursor:"pointer",
fontSize:"30px"
}
const style2 =
{
zIndex:"100",
cursor:"pointer",
fontSize:"30px",
color : "#f5d442"
}
//return
return(
<>
<span style={{fontSize:"20px"}} value={value}>{label}</span> <span style={{float:"right"}}><IoStar onClick={(event) => { let array = isYellow; array[value]=!array[value]; setIsYellow(array);}} style={isYellow[value] ? style2 : style1}/></span>
</>
)
}
export default App;