How do I select a definite checkbox using the URL parameter?
My Code:
<code>function Thumb(props) {
const [selected, setSelected] = useState(null);
const [loaderImg, setLoaderImg] = useState(false);
const navigate = useNavigate();
const itemId = useParams();
useEffect(() => {
//setSelected({ itemId.id }) = checked;
//console.log(setSelected);
}, [itemId]);
function onChange(i) {
setSelected((prev) => (i === prev ? null : i));
selected ? navigate('/thumb') : navigate('/thumb/' + i); // localhost:3000/thumb or thumb/1 ...
}
return (
props.media?.map((item) => (
<>
<div
id={item.id}
key={uuidv4()}
className="thumb"
onClick={() => scrollTo(item.id)}
>
<label>
<input
key={uuidv4()}
id={item.id}
type="checkbox"
className='thumb_check'
checked={item.id === selected}
onChange={() => onChange(item.id)}
/>
{loaderImg ? null : (
<div className="loader">Lade ...</div>
)}
<img
style={loaderImg ? {} : { opacity: '0' }}
src={`../media/thumb_${item.id}.jpg`}
alt={item.id}
onLoad={() => setLoaderImg(true)}
/>
</label>
</div>
{(item.id === selected && itemId.id !== item.id) ? // Show if Checkbox select and Param = item.id
<ShowImage>
: null}
</>
))
);
}
</code>
<code>function Thumb(props) {
const [selected, setSelected] = useState(null);
const [loaderImg, setLoaderImg] = useState(false);
const navigate = useNavigate();
const itemId = useParams();
useEffect(() => {
//setSelected({ itemId.id }) = checked;
//console.log(setSelected);
}, [itemId]);
function onChange(i) {
setSelected((prev) => (i === prev ? null : i));
selected ? navigate('/thumb') : navigate('/thumb/' + i); // localhost:3000/thumb or thumb/1 ...
}
return (
props.media?.map((item) => (
<>
<div
id={item.id}
key={uuidv4()}
className="thumb"
onClick={() => scrollTo(item.id)}
>
<label>
<input
key={uuidv4()}
id={item.id}
type="checkbox"
className='thumb_check'
checked={item.id === selected}
onChange={() => onChange(item.id)}
/>
{loaderImg ? null : (
<div className="loader">Lade ...</div>
)}
<img
style={loaderImg ? {} : { opacity: '0' }}
src={`../media/thumb_${item.id}.jpg`}
alt={item.id}
onLoad={() => setLoaderImg(true)}
/>
</label>
</div>
{(item.id === selected && itemId.id !== item.id) ? // Show if Checkbox select and Param = item.id
<ShowImage>
: null}
</>
))
);
}
</code>
function Thumb(props) {
const [selected, setSelected] = useState(null);
const [loaderImg, setLoaderImg] = useState(false);
const navigate = useNavigate();
const itemId = useParams();
useEffect(() => {
//setSelected({ itemId.id }) = checked;
//console.log(setSelected);
}, [itemId]);
function onChange(i) {
setSelected((prev) => (i === prev ? null : i));
selected ? navigate('/thumb') : navigate('/thumb/' + i); // localhost:3000/thumb or thumb/1 ...
}
return (
props.media?.map((item) => (
<>
<div
id={item.id}
key={uuidv4()}
className="thumb"
onClick={() => scrollTo(item.id)}
>
<label>
<input
key={uuidv4()}
id={item.id}
type="checkbox"
className='thumb_check'
checked={item.id === selected}
onChange={() => onChange(item.id)}
/>
{loaderImg ? null : (
<div className="loader">Lade ...</div>
)}
<img
style={loaderImg ? {} : { opacity: '0' }}
src={`../media/thumb_${item.id}.jpg`}
alt={item.id}
onLoad={() => setLoaderImg(true)}
/>
</label>
</div>
{(item.id === selected && itemId.id !== item.id) ? // Show if Checkbox select and Param = item.id
<ShowImage>
: null}
</>
))
);
}
The Checkbox are only for Select only one Item in the multiple List.
I need a Script for activate the Checkbox (eg. 5) on write in the URL manuel localhost:3000/thumb/5
Thanks.
New contributor
Kijupo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.