如何根据奇数或偶数索引删除数组中的元素？

Question

I'm trying to sort an array by its odd and even index and then have its data displayed by passing it as a prop to another component.

Let me explain my workings:

I have an array called products (woocommerce data).

const products = [
  { attributes: [{ option: "size 1" }] },
  { attributes: [{ option: "size 2" }] },
  { attributes: [{ option: "size 3" }] }
];

I have set up a .map() function in which for every object in my array I will return a component like so;

let sizeVariations = products.map((product, index) => {
  return (
    <div key={index}>
      <Buttons
        sizeEven={product.attributes[0].option}
        sizeOdd={product.attributes[0].option}
      />
    </div>
  );
});

I would like to pass the sizes through this component as two different props sizeEven and sizeOdd which equal product.attributes[0].option .

But for product.attributes[0].option I would like to "pop" or filter out all the odd or even index's accordingly for each prop.

How can I go about doing this?

Currently I have this format ( https://codesandbox.io/s/018488478p ) which does not work as you can only pass one index in evenArray or oddArray .

Answer 1

I don't know how you want to do this but actually you don't need to create additional arrays. I'm not quite good with CSS but here how I do it with four elements. With three elements last one will be centered. At least functionality works, but I'm not sure about CSS.

Update

I've changed the code a little bit. I defined the Buttons component as a functional one instead of class. Actually, App also would be like that but there would be some state in the future. I moved the map operation into a separate function and move it outside of return . So we have a cleaner logic in return method.

Note: Do not use indexes for key as I used here. Use some other unqiue values.

See here .

We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

Here is an in-depth explanation about why keys are necessary if you're interested in learning more.

Also, if React version is new enough we can use a top <React.Fragment> and use one key.

 const Buttons = props => { const { products } = props; const renderOptions = () => products.map((p, i) => !( i % 2 ) ? <div key={i} className="left">{p.attributes[0].option}</div> : <div key={i} className="right">{p.attributes[0].option}</div> ); return <div className="container">{renderOptions()}</div>; }; class App extends React.Component { render() { const products = [ { attributes: [{ option: "size 1" }] }, { attributes: [{ option: "size 2" }] }, { attributes: [{ option: "size 3" }] }, { attributes: [{ option: "size 4" }] }, ]; return ( <div className="App"> <Buttons products={products} /> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

 .container { width: 300px; height: 50px; padding-bottom: 10px; margin: 0 auto; } .left { width: 100px; height: 50px; margin: 0 20px 20px 0; border: 1px solid red; display: inline-block; } .right { width: 100px; height: 50px; border: 1px solid blue; display: inline-block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 2

 const products = [
    { attributes: [{ option: "size 1" }] },
    { attributes: [{ option: "size 2" }] },
    { attributes: [{ option: "size 3" }] }
  ];

  const evenArray = products.filter((product, index) => index % 2 )

We can use the Array.filter method to create a new array with the elements that pass the test that we supplied (product, index) => index % 2 , which in this case: if our element index is divisible by 2. We can find this out by using the modulus operator