ReactJs feedback with SVG Emojis - reactjs

Question

`
import React, { useEffect, useRef, useState, useCallback } from "react";
import Button from "../../elements/buttons/Button";
import Icon from "../../elements/icons/Icon";
function useDynamicSVGImport(name, options = {}) {
const ImportedIconRef = useRef();
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const { onCompleted, onError } = options;
useEffect(() => {
setLoading(true);
const importIcon = async () => {
try {
ImportedIconRef.current = (
await import(`./${name}.svg`)
).ReactComponent;
if (onCompleted) {
onCompleted(name, ImportedIconRef.current);
}
} catch (err) {
if (onError) {
onError(err);
}
setError(err);
} finally {
setLoading(false);
}
};
importIcon();
}, [name, onCompleted, onError]);
return { error, loading, SvgIcon: ImportedIconRef.current };
}
/**
* Simple wrapper for dynamic SVG import hook. You can implement your own wrapper,
* or even use the hook directly in your components.
*/
/** const Icon = ({ name, onCompleted, onError, ...rest }) => {
const { error, loading, SvgIcon } = useDynamicSVGImport(name, {
onCompleted,
onError
});
if (error) {
return error.message;
}
if (loading) {
return "Loading...";
}
if (SvgIcon) {
return <SvgIcon {...rest} />;
}
return null;
};
*/
export default function FacialReactions() {
const [name, setName] = useState("svg1");
const handleOnCompleted = useCallback(
(iconName) => console.log(`${iconName} successfully loaded`),
[]
);
const handleIconError = useCallback((err) => console.error(err.message), []);
return (
<div className="App">
<button
onClick={() =>
setName((prevName) => (prevName === "svg1" ? "svg2" : "svg1"))
}
>
Change Icon
</button>
<section>
<Icon icon="mood-vgood" variant="horizontal" />
<Icon icon="mood-good" variant="horizontal" />
<Icon icon="mood-neutral" variant="horizontal" />
<Icon icon="mood-bad" variant="horizontal" />
<Icon icon="mood-vbad" variant="horizontal" />
/** now i had to change the entire functionality to fit the attached Picture in the head of the question! */
/**
<Icon
name={name}
fill="gray"
onCompleted={handleOnCompleted}
onError={handleIconError}
/>
<Icon
name="svg1"
fill="gray"
width="300"
onCompleted={handleOnCompleted}
onError={handleIconError}
/>
<Icon
name="svg2"
fill="darkblue"
height="100"
onCompleted={handleOnCompleted}
onError={handleIconError}
/>
*/
</section>
</div>
);
}
`
I have been struggling with implementing the functionality of the attached design, a react feedback reaction using predefined SVG facial icons . But I can not figure out from where to start.
I have already the Icon set ready to use, however, I do not know how to come up with such functionality, How to add these SVG icons into a reusable react component!. now I had to change the entire functionality to fit the attached Picture in the head of the question!
please any help with that matter will be deeply appreciated! Thanks

Answer 1

You could just add onClick functionality to the svg.
<path onClick={()=>setMood(1)}></path>
For adding svg to react/jsx you can take a look at this https://blog.logrocket.com/how-to-use-svgs-in-react/