What is the best way to pass the value of a button to a different react component

Hey there! I'm currently working on a form component that includes a button array. I've added icons to the buttons using the value attribute, like so:

<button value={'admin'} onClick={(e)=> handleClick(e.target.value)}>
      <FaUserSecret classname="text-lg" />
</button>

The issue I'm facing is that in the handleClick function, e.target.value is returning the icon instead of 'admin'.

Any suggestions or solutions would be greatly appreciated! 😄💗.

I've already tried passing e as a parameter and using its value in the function, but the problem persists.

reactjsbuttonreact-forms

Answer â„–1

Could you provide more details or additional code snippets? I tested the code you shared and it seems to be functioning correctly for me. When I run it, I receive 'admin' as the output.

    <div className='App'>
      <button value={'admin'} onClick={(e)=> console.log(e.target.value)}>
     Click
      </button>
    </div>

Answer â„–2

Give this a shot:

<button value={'admin'} onClick={e => handleClick(e.target.value)}>
      <FaUserSecret classname="text-lg" />
</button>

Avoid enclosing "e" in parentheses.

Answer â„–3

Retrieve the administrator value assigned to the button using the 

e.currentTarget.getAttribute("value")
method.

Explore the code reference on CodeSandbox: CodeSandbox code reference

Learn about the distinction between e.target and e.currentTarget here: difference-between-e-target-and-e-currenttarget

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resetting forms in React upon submission

After successfully submitting a form using Axios, I'm facing an issue where the data in each text field remains on the page instead of getting cleared. I attempted to incorporate a resetForm function to reset the form back to its original blank state, ...

reactjsformsstate

Elevate state in React to modify classNames of child elements

I have a structured set of data divided into 6 columns representing each level of the hierarchy. When a user makes selections, their chosen location is highlighted with a dynamic CSS class name and displays the relevant data list. I've managed to impl ...

javascriptreactjsstateevent-bubbling

Receive fresh properties in React and subsequently reset state

I need some guidance on this issue: My scenario involves a parent React component and its child. The parent component contains a table, while the child has its own controls. What I am trying to achieve is the ability to click on a cell within the parent&a ...

javascriptreactjsreact-hooks

React is inferring the type of the 'charts' property in the object literal as 'any[]'

ide: vscode typescript: 2.7.1 react: 16.3.0-alpha.1 interface IState { numbers: number[]; } class CustomCanvas1 extends React.Component<undefined, IState> { constructor(properties: undefined) { super(properties); this.state = { ...

reactjstypescript

What is the best way to retrieve the current value of a React useState hook within a setInterval function while using Highcharts

import Error from 'next/error' import React, { useState, useEffect } from 'react' import Highcharts from 'highcharts' import HighchartsReact from 'highcharts-react-official' function generateChart() { const [co ...

javascriptreactjshighchartsnext.jssetinterval

What is the significance of the message "JavaScript files do not have any valid rules specified"?

I am working on a React - Typescript project that was created using the following command: create-react-app my-app --scripts-version=react-scripts-ts While it compiles without any issues, I keep receiving a message or warning that says: No valid rules h ...

reactjstypescripttslinttsconfig

React create-react-app with Content Security Policy: Blocked execution of inline script

I recently launched a new website using the Material UI Create React Template found on GitHub. After adding a Content Security Policy, building successfully, and deploying the site, I encountered an issue where the page wouldn't display in the browse ...

reactjsmaterial-uicontent-security-policy

Difficulty accessing `evt.target.value` with `RaisedButton` in ReactJS Material UI

My goal is to update a state by submitting a value through a button click. Everything works perfectly when using the HTML input element. However, when I switch to the Material UI RaisedButton, the value isn't passed at all. Can someone help me identif ...

javascriptreactjsonclickmaterial-ui

Using React with Material UI Select native does not display an empty value when the selected value is not found

In my project, I am incorporating Material UI Select in a native way using the following code snippet: <Select value={values.teamId} native onChange={handleSelectChange}> <option aria-label="None" value="" ...

reactjsselectmaterial-ui

Unable to locate an image when using .find() in ReactJs

When trying to display the selected item image, only alt attributes are being displayed. In my App.js file: <Route path="/Item/:id" element={<Item />} /> This is how I styled my Link in Trending.js using MUI: <StyledLink to={& ...

reactjsmaterial-uicreate-react-appreact-dom

Issue: Unable to locate ClerkInstanceContext - Encountered this error during the development of a project using the "nextjs

Currently, I am creating a replica of a threads app by following tutorials from the JS Mastery YouTube channel. However, I encountered an issue with the error message: ClerkInstanceContext not found. I attempted to resolve this by restarting the applicati ...

reactjsnext.jsclerk

Create a new column in Material UI Grid by adding an empty div element instead of using padding

I'm currently getting acquainted with Material UI Grid and I am interested in adding an empty column (a blank space on the right of the first element) without utilizing padding. How can this be achieved? Here's a snippet of the code being discus ...

javascriptreactjsmaterial-designmaterial-ui

Addressing the unresolved problem with mongoose through an axios post: A step-by-step guide

Currently, I am tackling an individual project that involves transferring data from a redux form to an express server via an axios call. Although I have successfully sent the client data to the server using body-parser, I am encountering difficulties with ...

reactjsexpressmongooseaxios

Mapping a list with sections can easily be achieved by breaking down the elements

I'm facing an issue with listing array data under sections using .map in React. I know how to use .map to list the entire array, but struggling to list each item under its respective section. Currently, I have to use .map separately for each section. ...

javascriptreactjslist

What is the best way to utilize the properties obtained from a spread operator?

I am encountering a confusing issue in my code. I am passing an object as a prop and then taking it as a param. Passing props Taking it as a param Console logging the prop Initially, everything works as expected. However, when I use the spread operato ...

reactjs

Understanding the attribute types in Typescript React

While working on code using Typescript + React, I encountered an error. Whenever I try to set type/value in the attribute of <a> tag, I receive a compile error. <a value='Hello' type='button'>Search</a> This piece o ...

reactjstypescripttsx

Unable to locate package.json: Issue encountered - ENOENT: File or directory not found

I'm encountering a frustrating npm issue while trying to run a project that utilizes Node.js, React, and NextJs. The error I receive in the terminal is as follows: npm ERR! path C:\...\NextJs_project\package.json npm ERR! errno -4058 np ...

reactjsnpmnext.js

Tips for updating the hover effect color on Material UI select component options in a React JS application

I've been trying to customize the hover effect for the options in the mui Auto Complete component drop-down menu, but I'm having trouble finding the right method to do so. Here is the hover effect that I want to change: Image I'd like to u ...

cssreactjsmaterial-uicomboboxhover

Enhancing User Experience with React-Redux: Implementing Subcategory Visibility based on Main Category Selection

How can I implement action logic to show and hide elements based on user interaction with main categories? Currently, all subcategories are being displayed at once, but I want them to be shown only when a user clicks on the corresponding main category. For ...

javascriptreactjsreduxnext.jsreact-redux

Optimal method for a React and HTML Select-component to output String values instead of Integer values

Within my React-class (JSX), I've included the following code: var Select = React.createClass({ onChange: function (ev) { console.log(ev.target.value); }, render: function() { var optionsHtml = this.state.options.map(function (el) { ...

javascriptreactjsjsx