Creating button with Loop ReactJS

Asked
Active3 hr before
Viewed126 times

8 Answers

reactjscreatingbutton
90%

The renderPagination() does not return component to be rendered, try like this, 1 you never return the buttons elements in renderPagination try return pageCount.map((page, index) => {return <button />}) – Hai Alaluf Jun 11 '20 at 10:09 , What is the difference between constructor "=default" and the compiler generated constructor in C++?

The renderPagination() does not return component to be rendered, try like this

renderPagination = () => {
    let {pageCount,currentPage} = this.state

    const paging = []

    for (let i= 1;i<pageCount; i++){
      paging.push(
        <button 
           onClick={() => {
            this.paginationDisplay()
            currentPage = i
           }
         }>
            {pageCount}
         </button>
      )
    }

    return paging
 }
88%

Wondering how to create loops in React? Learn about JSX and how to use methods like the map function to loop inside React JSX and render a list of items.,You can read more about it on the React website.,As you can see there are quite a few different ways in which you can render a list of items in React. I hope that after reading this article you are now more confident with React and know how to use loops in JSX.

If you have worked with React before, then there is a high probability that you know what JSX is, or have at least heard of it. JSX is a custom syntax extension to JavaScript which is used for creating markup with React. It might remind you a bit of a templating language, but with JSX you can use the full power of JavaScript. However, remember that JSX will not work directly in browsers and requires a build step to convert JSX markup into React.createElement function calls.

// JSX example

return (
  <div>
    <button onClick={onClickHandler}>Submit</button>
  </div>
)

// The above will be converted to something like this

return React.createElement(
    "div",
    {},
    React.createElement(
      "button",
      {
        onClick: e => {}
      },
      "Submit"
    )
  );
load more v
72%

Default browser button styles,React Button CodeSandbox,React Button Examples

function sayHello() {  alert('You clicked me!');}// Usage<button onClick={sayHello}>Default</button>;
function sayHello() {  alert('You clicked me!');}// Usage<button onClick={sayHello}>Default</button>;

Fun fact, if you inspect the default Button with the webkit inspector (right-click -> inspect), you can see the browser's default styles defined in the user agent stylesheet.

button {
   -webkit - appearance: button; - webkit - writing - mode: horizontal - tb!important;
   text - rendering: auto;
   color: buttontext;
   letter - spacing: normal;
   word - spacing: normal;
   text - transform: none;
   text - indent: 0 px;
   text - shadow: none;
   display: inline - block;
   text - align: center;
   align - items: flex - start;
   cursor: default;
   background - color: buttonface;
   box - sizing: border - box;
   margin: 0 em;
   font: 400 11 px system - ui;
   padding: 1 px 7 px 2 px;
   border - width: 1 px;
   border - style: solid;
   border - color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
   border - image: initial;
}
button {
   -webkit - appearance: button; - webkit - writing - mode: horizontal - tb!important;
   text - rendering: auto;
   color: buttontext;
   letter - spacing: normal;
   word - spacing: normal;
   text - transform: none;
   text - indent: 0 px;
   text - shadow: none;
   display: inline - block;
   text - align: center;
   align - items: flex - start;
   cursor: default;
   background - color: buttonface;
   box - sizing: border - box;
   margin: 0 em;
   font: 400 11 px system - ui;
   padding: 1 px 7 px 2 px;
   border - width: 1 px;
   border - style: solid;
   border - color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
   border - image: initial;
}
const Button = styled.button`  background-color: black;  color: white;  font-size: 20px;  padding: 10px 60px;  border-radius: 5px;  margin: 10px 0px;  cursor: pointer;`;// Usage<Button onClick={sayHello}>  Disabled Button</Button>
const Button = styled.button`  background-color: black;  color: white;  font-size: 20px;  padding: 10px 60px;  border-radius: 5px;  margin: 10px 0px;  cursor: pointer;`;// Usage<Button onClick={sayHello}>  Disabled Button</Button>
const Button = styled.button`  background-color: black;  color: white;  font-size: 20px;  padding: 10px 60px;  border-radius: 5px;  margin: 10px 0px;  cursor: pointer;  &:disabled {    color: grey;    opacity: 0.7;    cursor: default;  }`;// Usage<Button disabled onClick={sayHello}>  Disabled Button</Button>
const Button = styled.button`  background-color: black;  color: white;  font-size: 20px;  padding: 10px 60px;  border-radius: 5px;  margin: 10px 0px;  cursor: pointer;  &:disabled {    color: grey;    opacity: 0.7;    cursor: default;  }`;// Usage<Button disabled onClick={sayHello}>  Disabled Button</Button>
<a href="https://react.school" target="_blank"> <Button> Link Button </Button></a>
<a href="https://react.school" target="_blank"> <Button> Link Button </Button></a>
const ButtonGroup = styled.div` display: flex;`// Usage<ButtonGroup> <Button> Group 1 </Button> <Button> Group 2 </Button></ButtonGroup>
const ButtonGroup = styled.div` display: flex;`// Usage<ButtonGroup> <Button> Group 1 </Button> <Button> Group 2 </Button></ButtonGroup>
import React, { useState } from 'react';import styled from 'styled-components';const Button = styled.button`  /* Same as above */`;const ButtonToggle = styled(Button)`  opacity: 0.6;  ${({ active }) =>    active &&    `    opacity: 1;  `}`;const ButtonGroup = styled.div`  display: flex;`;const types = ['Cash', 'Credit Card', 'Bitcoin'];function ToggleGroup() {  const [active, setActive] = useState(types[0]);  return (    <ButtonGroup>      {types.map(type => (        <ButtonToggle          key={type}          active={active === type}          onClick={() => setActive(type)}        >          {type}        </ButtonToggle>      ))}    </ButtonGroup>  );}
import React, { useState } from 'react';import styled from 'styled-components';const Button = styled.button`  /* Same as above */`;const ButtonToggle = styled(Button)`  opacity: 0.6;  ${({ active }) =>    active &&    `    opacity: 1;  `}`;const ButtonGroup = styled.div`  display: flex;`;const types = ['Cash', 'Credit Card', 'Bitcoin'];function ToggleGroup() {  const [active, setActive] = useState(types[0]);  return (    <ButtonGroup>      {types.map(type => (        <ButtonToggle          key={type}          active={active === type}          onClick={() => setActive(type)}        >          {type}        </ButtonToggle>      ))}    </ButtonGroup>  );}
load more v
65%

To create a list of elements using a for loop in React, create an empty array and push React elements directly into it. Then Render it like any other element:,In this article we will see how to iterate through a collection to render a list of elements in React. We will also have a look at how to fire callback from the children elements.,Add the button element to our render method

render: function() {  var buttonListElements = [], // Empty Array    n = 5,    i;    for(i = 0; i < n; i = i + 1) {    // For each element, push a React element into the array    buttonListElements.push(      <li key={i}><button>{i}</button></li>    );  }   // Then render the array using curly braces  return (    <div>      <ul>       {buttonListElements}      </ul>    </div>  )}
load more v
75%

I have a render statement that has a loop before the return:,Try having your loop generate buttons before the return statement. Store them to a variable. Then use JS injection after the return statement in between the view tags.,My function selectMaker takes an array and returns JSX:

Really, it is a series of views that each display the name from the array and an accompanying button.

 <View>
          {this.props.rolesarray.map(function(object) { // for each element in the Roles array, display it https://stackoverflow.com/questions/37997893/promise-error-objects-are-not-valid-as-a-react-child
              return (
                <View >
                <DisplayRoles key={object.id} data={object} />
                <Button title="this is a button"  />
                </View>
              );
            })}
        </View>
load more v
40%

When using React, you generally don’t need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.,Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:,Inside a loop, it is common to want to pass an extra parameter to an event handler. For example, if id is the row ID, either of the following would work:

<button onclick="activateLasers()">
   Activate Lasers
</button>
load more v
22%

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

React allows you to easily write JavaScript code inside your components. This makes it easy for any developer to comfortably handle common programming techniques in React, such as looping through a set of items, creating and invoking functions, storing data in local variables, and so on. ,This guide demonstrates how to implement loops in common use cases, such as rendering a list of static data and outputting data from an API. ,Consider a simple use case where you have to render a list of items on the DOM.

1return(
2	<>
3	{data}
4	</>
5)
load more v

Other "reactjs-creating" queries related to "Creating button with Loop ReactJS"