6 Replies
Could you provide more context/code example of what are you trying to do?
Why do you want to import useRef? Solid doesn’t provide, nor need such a primitive.
Take a look at https://www.solidjs.com/tutorial/bindings_refs
SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
Ok
import { createRef } from "react";
import { IoAddCircle } from "solid-icons/io";
import { createSignal } from "solid-js";
const UpdatedProfile = () => {
const imgRef = createRef();
const [photo, setPhoto] = createSignal("");
const handleImage = (e) => {
const file = e.target.files[0];
transformFile(file);
};
const transformFile = (file) => {
const reader = new FileReader();
if (file) {
reader.readAsDataURL(file);
reader.onloadend = () => {
setPhoto(reader.result);
};
} else {
setPhoto("");
}
};
return (
<div
onClick={(e) => {
e.stopPropagation();
}}
className="flex flex-col justify-center absolute p-2 left-[40%] top-[40%] max-[700px]:top-[25%] max-[700px]:left-[3rem] items-center bg-neutral-900 shadow shadow-neutral-300 h-auto w-[270px] rounded-[9px]"
>
{photo() ? (
<img
onClick={() => imgRef.current.click()}
src={photo()}
className="w-full"
/>
) : (
<div
onClick={() => imgRef.current.click()}
className="flex items-center gap-2 text-white p-3 hover:bg-slate-800 cursor-pointer rounded-[8px] w-full"
>
<IoAddCircle size={25} />
<p className="text-white font-kanit">Select a photo</p>
</div>
)}
<input
type="file"
className="hidden"
ref={imgRef}
onChange={handleImage}
/>
</div>
);
};
export default UpdatedProfile;
1. Solid isn't react compat, so you will not be able to mix and match react and solid packages.
2. There is no concept of useRef in solid.
3. React does not have an export called createRef. (Typescript could help u out visualising those bugs.)
4. Instead of
const imageRef = ... you can do let imageRef;
5. I would advise going through the tutorial section of the solid website. It will help getting a grip on some of the core mechanisms.oo shit haha my bad
That have been resolved thanks
But i have another issue with my app deployment to vercel
the routes are not working it's showing 404
https://pingspace.vercel.app/