Strategy for showing/hiding li iwith an onClick n React without using JQUERY

Asked
Active3 hr before
Viewed126 times

7 Answers

onclickwithoutusingreact
90%

Meta Stack Overflow , Stack Overflow help chat ,Stack Overflow en español

For example:

triggerDeletePost({
   currentTarget
}) {
   const $li = currentTarget.closest('li[name]');
   const name = $li.getAttribute('name');
   console.log(name, $li) // here you have it
}
88%

Without if statements in JSX, how do you control your application's flow? Let's explore how to render or NOT render elements in React.,You can't embed if statements in JSX. So how do you control what is displayed? Controlling flow through your application is fundamental to programming, and it's no different in React. In this article, we are going to answer the question: How do I show or hide something in React?,When you need to control whether one element vs. another is displayed, or even one element vs. nothing at all (null), you can use the ternary operator embedded inside of a larger portion of JSX.

Because this if statement is not embedded inside of JSX but is just part of the regular JavaScript portion of the function, you are free to use any sort of JS construct that you like. In this example, if the product is not available, we're just going to return null.

const AddToCart = ({ available }) => {
  if (!available) return null;

  return (
    <div className="full tr">
      <button className="product--cart-button">Add to Cart</button>
    </div>
  );
};
load more v
72%

In this post I’ll be covering some tips on how to use React and jQuery together in the same UI. Okay so first off you might be thinking “why would you want to do such a thing?” - in fact the idea of trying to make React’s declarative style live together with imperative jQuery DOM updates may have you thinking something like this, and for the most part, you wouldn’t be wrong.,Now we’re going to do it the other way and stick some React DOM inside our jQuery DOM. This is a little trickier. We’ll start with a BuyButtonComponent in React, there’s not much to it:,As an example we’ll start by rendering a simple list of products with jQuery. We’ll just show the name for each product and a button to buy it. Then we’ll get into replacing parts of the UI with React.

var products = [
  {
    id: 1,
    name: 'Book',
    price: 15
  },
  {
    id: 2,
    name: 'Burrito',
    price: 8
  },
  {
    id: 3,
    name: 'Spaceship',
    price: 999999999
  },
  {
    id: 4,
    name: 'Dinosaur Bones',
    price: 5000000
  }
];

function buyProduct(productId) {
  // buy the product
}

/* -- Just jQuery -- */
function buyButtonJquery(product) {
  var button = $('<button class="buy-button">$' + product.price
    + '</button>');
  
  // handle click event
  $(button).on('click', function(event) {
    event.preventDefault();
    buyProduct(product.id);
  });

  return button;
}

function productListJustJquery(products, element) {
  var list = $('<ul class="product-list"></ul>');

  products.forEach(function(product) {
    var item = $('<li>' + product.name + '</li>');
    item.append(buyButtonJquery(product));
    list.append(item);
  });

  // replace the existing list if there is one
  var currentList = $(element).find('.product-list');
  if (currentList.length) {
    currentList.replaceWith(list);
  } else {
    $(element).append(list);
  }
}
load more v
65%

To demonstrate this, let’s sketch out a wrapper for a generic jQuery plugin.,For a more concrete example of these concepts, let’s write a minimal wrapper for the plugin Chosen, which augments <select> inputs.,Let’s say that this is the API we’re striving for with our <Chosen> wrapper React component:

class SomePlugin extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);    this.$el.somePlugin();  }

  componentWillUnmount() {
    this.$el.somePlugin('destroy');  }

  render() {
    return <div ref={el => this.el = el} />;  }
}
load more v
75%

Processing bindings that perform dirty checks and update the relevant parts of the DOM are the core operations of change detection in Angular.,But how does Angular know when it should run change detection?,But in Angular we have both options. We can use the Change Detector service to run change detection manually:

Pretag
 Pretag team - issue, fix, solve, resolve
40%

The web server reported a bad gateway error.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

One more example of behavior. A click on an element with the attribute data-toggle-id will show/hide the element with the given id:,In the handler table.onclick we should take such event.target and find out whether the click was inside <td> or not.,It will use event.target to get the clicked element and highlight it.

<table>
   <tr>
      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
   </tr>
   <tr>
      <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders</td>
      <td class="n">...</td>
      <td class="ne">...</td>
   </tr>
   <tr>...2 more lines of this kind...</tr>
   <tr>...2 more lines of this kind...</tr>
</table>
load more v

Other "onclick-without" queries related to "Strategy for showing/hiding li iwith an onClick n React without using JQUERY"