DEV Community: GAURAV YADAV

Something wrong with my state in react ??

GAURAV YADAV — Wed, 01 Apr 2020 06:44:23 +0000

This is what i am trying to do :

" Every time the GET new Quote button is clicked it flips click between true/false, like flipping a lightswich on and off. Every time the newQuote property on gets a new value, the QuoteBox component rerenders. Every time the component rerenders, it calls fetch in componentDidMount " *

Please someone help me to runmy code properly

I created this inside index.js

class Parent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     click: false
   };
 }

 render() {
   return (
     <>
       <QuoteBox newQuote={this.state.click} />
       <button onClick={() => this.setState({ click: !this.state.click })}>
         Get new quote
       </button>
     </>
   );
 }
}

I created this inside App.js

<button onClick={() => this.setState({ click: !this.state.click })} 
        className="btn btn-primary"
        id="new-quote"
        >
        NEW QUOTE{this.props.newQuote}
</button>

Cannot add class but elements are already added to the DOM

GAURAV YADAV — Sun, 15 Dec 2019 04:22:50 +0000

Hey I am trying to add an active class to searchResult HTML using JavaScript.

I try to search for recipe in search bar and results are displayed as it is shown in image.
Search Result
https://i.stack.imgur.com/vWj4m.jpg

When I click on a recipe from the search list I want to add a background color to the currently selected recipe(click on the recipe) using function resultHighlight()

function resultHighlight() is being called in the controller and produces an error. Since the HTML is already added(after a search query is fired) by function renderRecipe() then why it is unable to find href id and producing error ?

//Function to add background color

export const resultHighlight = id => { document .querySelector(a[href="#${id}"]) .classList.add("results__link--active"); };

Error Image
https://i.stack.imgur.com/m372A.jpg

NOTE: I tried console logging follwoing part and it returns null.

`document.querySelector(a[href="#${id}"])

//OUTPUT: null`

JavaScript has already added HTML by a function (Search result)

See the full question here

https://dev.to/dvgy/cannot-add-class-but-elements-are-already-added-to-the-dom-2km8

Cannot add class but elements are already added to the DOM

GAURAV YADAV — Sat, 14 Dec 2019 16:40:25 +0000

Hey I am trying to add an active class to searchResult HTML using Javascript.

I try to search for recipe in search bar and results are displayed as it is shown in image.

Search Result
https://i.stack.imgur.com/vWj4m.jpg

When I click on a recipe from the search list I want to add a background color to the currently selected recipe(click on the recipe) using function resultHighlight()

//Function to add background color

export const resultHighlight = id => {
document
.querySelector(a[href="#${id}"])
.classList.add("results__link--active");
};

Error Image
https://i.stack.imgur.com/m372A.jpg

NOTE: I tried console logging follwoing part and it returns null.

document.querySelector(a[href="#${id}"])

//OUTPUT: null

JavaScript has already added HTML by a function (Search result)

//Function to add search result on UI

const renderRecipe = recipe => {
const markup = <li> <a class="results__link results__link--active" href="#${recipe.recipe_id}"> <figure class="results__fig"> <img src="${recipe.image_url}" alt="${recipe.title}"> </figure> <div class="results__data"> <h4 class="results__name">${reduceRecipeTitle(recipe.title)}</h4> <p class="results__author">${recipe.publisher}</p> </div> </a> </li>;

  elements.searchResList.insertAdjacentHTML("beforeend", markup);
};