I want to show only the paragraphs related to the selected chapter. To do this I did STATE with the selected Chapter number (the chapters are in numbers)
When I view the paragraphs in the page load it works fine.
I also want to make a list of buttons that move to the other chapters. The problem is that when I press the above buttons it does not change the STATE and I did console.log and really saw that the parameter I pass is incorrect. Where am I wrong in the code?
{allChapters.map(allChapter =>
<button key={allChapter} onClick={(allChapter) => this.handleChange(allChapter)}>
{allChapter}
</button>
)}
handleChange = (chapNum) => {
this.setState(({ currentChapter }) => ({ currentChapter: chapNum }))
console.log('chapNum', chapNum);
};
console.log()
It is important to note: {allChapter} is mirror number (1,2,3, ...) and the problem is not in it.
With your current code, the only thing you do is to rename the default onClick event parameter to allChapter. Just do this instead:
{allChapters.map(allChapter =>
<button key={allChapter} onClick={() => this.handleChange(allChapter)}>
{allChapter}
</button>
)}
Btw, you should change the variable name allChapter to chapter ;)
<button key={allChapter} onClick={(allChapter) => this.handleChange(allChapter)}>
{allChapter}
</button>
By doing this, you rename the default onClick event parameter with
allChapter
Then you pass this renamed event to the handleChange. It's why, your console.log shows an event.
The correct way to pass your parameter is :
<button key={allChapter} onClick={() => this.handleChange(allChapter)}>
{allChapter}
</button>
Related
const onSubmit = (event, val) => {
console.log(val);
event.preventDefault();
setValues({ ...values, error: "", success: "", key: val });
setDidSubmit(true);
};
Using map in React:
{data.map((e) => ( <li key={e._id}> <button
onClick={(e) => onSubmit(e, e._id)}
className="btnx btn-primary"
>
Book Now logout
</button> </li> )}
onClick I want to pass unique id e._id to the onSubmit function.
But I'm getting output as undefined.
Edit :- can you also please provide the output of e argument that you passed into the map callback ?
onClick takes a callback function and pass event as its parameter . Now , here the problem what if i want take some other parameter , to overcome this problem we have to wrap the function (can be accomplished by anonymous function or some other defined function in the code ) -> this step you did the correct but thing you did wrong is that you did not accounting the onClick callback default parameter i.e event . so you must account the event parameter in your wrapping function , then you can able to access the event object.
I hope so you get the answer.
{data.map((e) => ( <li key={e._id}> <button
onClick={(event) => onSubmit(event, e._id)}
className="btnx btn-primary"
>
Book Now logout
</button> </li> )}
so i have a form component having button array,
though i used icons in it with value attribute. just like below.
<button value={'admin'} onClick={(e)=> handleClick(e.target.value)}>
<FaUserSecret classname="text-lg" />
</button>
in handleClick function e.target.value is returning icon instead of admin.
Thanks in advance 😄💗.
I tried to pass e as parametter and use its value in function but still same.
Can you please elaborate or share more code with us. Cause I tried your given code and it's working fine. I am getting 'admin' as the output.
<div className='App'>
<button value={'admin'} onClick={(e)=> console.log(e.target.value)}>
Click
</button>
</div>
Try this:
<button value={'admin'} onClick={e => handleClick(e.target.value)}>
<FaUserSecret classname="text-lg" />
</button>
You're not supposed to use parenthesis around "e".
You can use e.currentTarget.getAttribute("value") method to get the admin value assigned to the button.
CodeSandbox code reference
Difference b/w e.target and e.currentTarget - difference-between-e-target-and-e-currenttarget
I have made a simple button in react app.
<button onClick={console.log('clicked')}>Click</button>
The problem is that button is continuously click without clicked by me.
<button onClick={() => console.log('clicked')}>Click</button>
is the solution. When you put paranthesis without using the arrow function, it will automatically execute without waiting for you to click the button
onClick takes function as a parameter. Try this and it should work correctly:
<button onClick={ () => { console.log('clicked') } }>Click</button>
In my case buttons are created dynamically and functions names are assigned to them dynamically. Function names are received from DB. I know it is possible in JS but in reactJS, I couldn't assign my method names to the relevant Button.
Below is my current code
{this.state.btnArray.map((btnProps, index) =>
<button
key={index}
onClick={() => this.onButtonClick(btnProps.method)}
style={btnStyle}
>
{btnProps.value}
</button>
)}
Here onButtonClick is the method for all buttons, I want it to change for each button.
Try changing your onClick function to call the btnProps.method prop directly
{this.state.btnArray.map((btnProps, index) =>
<button
key={index}
onClick={() => btnProps.method()}
style={btnStyle}
>
{btnProps.value}
</button>
)}
I need help in making the component search fire up only when a submit button is clicked or hit enter key. not as the user types.
I have set up my state and
used onValueChange method to get the value entered
made the button
state={
searchText: ""
}
......
...
onValueChange= {(e) => this.setState({searchText:e.target.value})}
<button type="button >
Search
</button>
I want my button to get that value and make the query run when hit submit or press enter.
thanks for help
You can read the docs on controlled behavior in ReactiveSearch over here. I have also implemented a small example for the above situation you check the demo here.
Just you have to do is ,
set the state (eg. showResult) as true on onClick event of the search button,
And then just add condition to the result list or result card.
Like this:
{showResult ?
(<ReactiveList
componentId="results"
dataField={selected}
size={15}
sortBy={sort}
loader={<ProductLoader />}
react={{
and: andQuery
}}
onAllData={(results, loadMoreData) => this.getProduct(results)}
/>)
: ""}