Currently working on a project using react/typescript and facing an issue with changing the border color and width of a div upon clicking it:
<div
className="showroom-card "
onClick={() => setSelection({ showroom: 'Westchester' })}
>
https://i.sstatic.net/RoYWn.png
Despite its simplicity, as I am relatively new to this, I am struggling to find a solution.
With JavaScript, creating elements is possible, but it would be beneficial to provide additional details.
div.style.border="2px dashed #333";
When using pure html and js, the code would look something like this:
.showroom-card {
width: 500px;
height: 300px;
background-color: yellow;
border: 2px solid red;
}
.selected {
border: 2px solid black;
} <div
id="card1"
class="showroom-card"
onClick="(function(divId) {
targetDiv = document.querySelector(`#${divId}`)
targetDiv.classList.toggle('selected')
})('card1');return false;"
></div>However, in react, you need to use the state of the component to manipulate the div's style. For instance, you would utilize a variable called divToggled in the component's state to control the border and adjust its color. The handler function, named handleDivClick, modifies the state triggering a rerender of the component:
class YourComponent extends React.Component {
...
handleDivClick = () => {
this.setState(divToggled: !this.state.divToggled)
}
...
render() {
return (
<div
onClick={this.handleDivClick}
className={`showroom-card ${this.state.divToggled ? 'selected' : ''}`}
/>
)
}
}
I'm currently developing a CRUD application using Laravel and React. After submitting a form in my component, I want to be redirected to the home page. I tried using the Redirect component but encountered an issue where the new data was not rendering ...
Make sure to have a confirmation window pop up before submitting the form, and after confirming submission (by clicking OK), redirect to a confirmation page. Here's an example code snippet: <button type="submit" value="Save" id="Save" onclick="cl ...
Hello, I am trying to make the container height adjust automatically based on the responsive image it contains. The container's display is set to flex and the image is positioned between two divs with the class "text-block". These divs have a width of ...
So, here's the situation - I've inherited a form with two buttons that inexplicably have the same name and id (seriously, don't ask me why, I didn't design this form haha). I'm attempting to utilize the Ajax .click function to trig ...
At the top of my page, I have three buttons with an input box underneath. <div> <form> <div> Enter Show Name<input type="text" ng-model="showName" /> </div> </form> </div> ...
I'm dealing with a React SPA that manages all the URL titles on the frontend, so the historyChange event registered on GTM captures the visited URLs along with their titles correctly. However, I've noticed that on the initial load of the SPA, su ...
I'm having trouble accessing a JSON api from a specific adult-themed website. I've been trying to make it work but so far no luck. You can find my code snippet in this jsfiddle: http://jsfiddle.net/SSqwd/ and here is the script: $.ajax({url: &ap ...
Struggling with creating a complex layout using minimal relative and absolute positioning. Here's the issue I'm facing: All my elements are aligned side by side with only one problem: the border image needs to bleed into the row below. How can t ...
I recently implemented a custom error page following the instructions provided in the documentation. My goal was to use this error page for specific errors that may occur during the getStaticProps function. Here's how I structured it: const Page: Next ...
I've encountered a challenge. I need to slice the last two characters in a string, but only for strings that contain numbers. I attempted using "nome": element.nome.slice(0,-2) and now I require some sort of validation. However, figuring out how to do ...
One issue I am encountering is with the Image component not loading images as expected. The setup of the component looks like this: <Image className={styles.imgHomeBlock} src={testImg} alt='Commercial' width='500&apos ...
I am facing an issue with updating the data when using on-change from the select box. Initially, I can update the data by clicking a button or triggering the on-change event once. However, I encounter difficulties in updating the data multiple times throug ...
Can you explain the differences between flatMap(), switchmap(), and pipe()? Which one would be most suitable for the given scenario? I need to call the next method once both responses are received. this.jobService.getEditableText('admins', compar ...
Following a tutorial at https://learn.microsoft.com/en-us/learn/modules/build-web-api-minimal-spa/5-exercise-create-api Everything was going smoothly until I reached this step: Add the following proxy entry to package.json: "proxy": "http:/ ...
I am currently working on a web application using Azure Maps along with the DrawingManager library. My goal is to allow users to save a drawn rectangle and potentially edit it by resizing later on. The strange thing is that while resizing rectangles works ...
Within my code, there are two Autocomplete controls displayed. The selection made in the first control dictates the available options in the second control. I am facing an issue where clearing the first control with the "clear" button does not also clear ...
I have developed a library that incorporates Material UI components, which automatically adjust their colors based on the theme of the project they are installed in. Now I want to apply the "primary" and "secondary" colors to a div element so that the back ...
Encountering a challenge in triggering the opening of a file dialogue on older iOS devices, particularly those running iOS 12. The approach involves utilizing the React-Dropzone package to establish a dropzone for files with an added functionality to tap ...
I've been working on retrieving column values from a database and storing them in an array, but I keep getting an empty array as the result. function FetchData(query, db) { var resultArray = new Array(); db.transaction(function(tx) { tx.executeSq ...
How can I use CSS to change the color of a Material button when hovering over it? mat-raised-button color="primary">button</button> ...