I have a form with a radio button that have to do something when the item selected changes, but it only happends when the page loads but no when I select other item
This is my code:
<div key={item} className="lg:w-1/2">
<label
className="flex items-center mx-6"
htmlFor={item.option_image.alt}
>
<input
className="w-5 h-5 mr-4"
type="radio"
id={item.option_image.alt}
value={item.option_image.alt}
name={slice.primary.title}
checked={item.option_image.alt === category}
onChange={console.log(item.option_image.alt)}
required
/>
<Image
src={item.option_image.url}
width={item.option_image.dimensions.width}
height={item.option_image.dimensions.height}
alt={item.option_image.alt}
/>
<p className="flex-1 my-auto ml-2 text-lg text-white 2xl:mr-4">
{item.option_label}
</p>
</label>
</div>
You have to create an arrow function as such:
onChange={()=>console.log(item.option_image.alt)}
What you are doing now is simply accessing the onChange method.
Notice the difference:
With onChange={(e) => onChange(e)}, you are essentially creating a new function that calls onChange method during each render.
With onChange={onChange}, you are directly accessing onChange method.
You need to do it like this:
onChange={() => console.log(item.option_image.alt)}
If you don't do it like this, it will run the console on the first load of the page, not when the radio is clicked.
Related
I Have this form with the transition
this is the problem:
https://youtu.be/cgtBNKRgJwQ
I want the magnifying glass to stay fixed, and the form to move
my code:
import Search from './Icons/SearchIcon';
export default function SearchForm() {
return (
<div className="flex">
<input
id="input"
className="transition-[width] duration-[1500ms] text-sm focus:pl-3 focus:outline-none focus:p-1 w-0 focus:w-full border-y border-l bg-white border-slate-200"
/>
<label className="border-y border-r p-1 border-slate-200" htmlFor="input">
<Search />
</label>
</div>
);
}
Looks like your animation does what you want.
Your component is almost ready, it's just missing ONE class to do what you want:
Add justify-end on your main div, it should do the trick.
I have multiple divs that are dynamic (it depends on which filter the visitor checked). So I can not use getElementById.
I need to get the parent div to change its CSS if an input is checked.
Here is my code:
{workout?.map(x => {
return <div className='relative bg-gray-200 p-4 rounded-md my-3 mx-2' key={x.name}>
<input onClick={handleChecked} className='absolute right-0 top-0' type="checkbox" />
<div className='flex'>
<img className='w-2/6 rounded mr-5' src={`${x.path}`} alt={x.name} />
<div className='w-4/6'>
<h2 className='text-xl'>{x.name}</h2>
<p>Nombre de séries : {x.set}</p>
<p>Nombre de rép : {x.reps}</p>
{x.secondary ? <p>Muscles solicités : <br />
<span className='space-x-2'>
{x?.secondary?.map(k => {
return <span className='bg-white px-1 rounded-md' key={k}>{k}</span>
})}
</span>
</p> : null}
</div>
</div>
</div>
})}
The idea, is to add a border-2 border-teal-500 class to the parent div of the input when it is checked.
Here is my handleChecked:
function handleChecked(e) {
// code here
}
I saw that I had to use parentNode but the problem is, I can't store in a variable the current input because it is dynamic. Every item has its own input.
Any idea how I can handle this?
You shouldn't be using getElementById (or any other vanilla JS DOM method) in React anyway - store and change values in state instead. You can leverage this by making input a controlled component, and storing the checked values in an array, or in workout - then, when returning the JSX, you just need to check whether the x variable (the item being iterated over) indicates that the current input should be checked or not - which will also tell you whether the parent should have a different class.
const makeHandleChecked = (i) => (e) = {
setWorkout(
workout.map(
(w, j) => j !== i ? w : { ...w, checked: e.target.checked }
)
);
};
{workout?.map((x, i) => (
<div className={`relative bg-gray-200 p-4 rounded-md my-3 mx-2${x.checked ? ' checked' : ''}`} key={x.name}>
<input onClick={makeHandleChecked(i)} checked={x.checked} className='absolute right-0 top-0' type="checkbox" />
I'm trying to implement a kind of table, which has an add button that opens a modal.
Inside the modal, I have the inputs that I want to update in the table, but using the ant design modal it has an ok button and a cancel button. How do I make the path to get the values? I'm having trouble understanding/writing this syntax. Can someone help me?
on the "onOk", i don't know how to write the function, tried creating a onSubmit(values) and console.log it but it doesn't show
Here's the code
function showModal(nome,colunas) {
setFormDisplay("");
setModal(!modal);
setFormName(nome);
setFormColumns(colunas);
}
function cancelModal() {
setFormDisplay("none");
setModal(false);
setFormName("");
setFormColumns([]);
}
<>
<div className="">
<CardsHost posts={nomes} />
</div>
<Modal
visible={modal}
onOk={}
title="Novo Prontuário"
onCancel={cancelModal}
style={{display:`${formDisplay}`}}
width={1000}
>
{formColumns.map((column,index) => (
<>
<div className="labelll">
<label key={`label-${index}`}>{column.title}</label>
{(column.key !=='proc' && column.key !== 'meds' )
? <Input key={`input-${index}`} style={{ width: "61.3%" }} />
: (column.key == 'proc' ) ? <div className="pesquisa-input"><Demo /></div>
: <div className="pesquisa-input"><PageComponentMeds /> </div>
}
</div>
{/*<div className="labelll">
<label> Data de Atendimento</label>
<DatePicker style={{ width: "61.3%" }} />
</div>
<div className="labelll">
<label> Nota </label>
<TextArea style={{ width: "61.3%" }} />
</div> */}
</>
))}
</Modal>
</>
);
}
The easiest way would be use to add a state variable for both of your input values. You can update them using the onChange callback provided by the antd components. On submit you use the state values to make your api call.
Make sure that you reset the variables on cancel and after a successful call.
I had created some cards from an array of objects, now I want to show popup data for each card differently.
here is my code of printing
{data.carData.map( single=>(<li>{ <div onClick={handleClick}><Card single={single}/></div>} </li>))}
for this, I want the card name onClick event, but when I pass anything in the handleClick react throw an error of too many re-renders.
if I do the same onClick event inside the card component and log it prints all the cards names one by one
here is what is inside the card:
function Card({single}) {
const [flowName, setflowName] = useState();
const handleClick=(e)=>{
setflowName(e);
return
}
console.log("loging name:",flowName);
return (
<div className="main mb-2 z-0" onClick={handleClick(e=>single?.flowName)} >
<div className=" inner_main_container pt-4 px-8 bg-white shadow-lg rounded-lg ">
<div className="flex justify-between">
<div className="flex flex-row align-center">
</div>
{single?.badge.map(badge=>(
<div className={"badge"} key={badge}>
<span className={badge==="Growth"?" badgeClrG":(badge==="Content"?"content":"badgeClrO")} key={badge}>{badge}</span>
</div>
) )}
</div>
<div className="flex justify-center">
<img src={single?.image} alt={single?.flowName} />
</div>
<div >
<div className={"mt-2 flex justify-center"}>
<h1>{single?.flowName}</h1>
</div>
</div>
</div>
</div>
) } export default Card
I suspect you're doing this when you're trying to pass a value:
single=>(<li>{ <div onClick={handleClick(value)}><Card single={single}/></div>} </li>))}
Every time this is rendered, the function is invoked straight away, which causes another render and so on...
The solution is to wrap your handleClick call in another function:
single=>(<li>{ <div onClick={()=>handleClick(value)}><Card single={single}/></div>} </li>))}
I have a radio button using pure css, but it doesn't work on first click, it only work on the second click onward, not sure it has to do with my react prop or not:
const Radio = ({ id, name, value, checked, children }) => (
<div className="radioBtn">
<input type="radio" value={value} id={id} name={name} checked={checked} />
<label className={"radio"} htmlFor={id}>
<span className={"big"}>
<span className={"small"} />
</span>
<span>{children}</span>
</label>
</div>
);
https://codesandbox.io/s/react-sass-34b8w
Use defaultChecked instead of checked={checked}.