My very bad javascript skills

🙋Get Help
1

I want to do the simple task of moving the product wrapper with a button click can anyone help…

import React from "react";
import { connect, styled } from "frontity";
import Item from "./list-item";
import buttonImage from "../design/assets/button.svg";
import { useSpring, a } from "react-spring";

const pos = -385;

const ProductArchive = ({ state }) => {

  const data = state.source.get(state.router.link);


  return (
    <Store>
      <ButtonWrapper>
        <PrevButton
          onClick={() => {
            console.log("prev Click");
            console.log(pos);

            if (pos <= -385) {
              return;
            } else {
              pos + 70;
              console.log(pos);
              return pos;
              
            }
          }}
        >
          <img src={buttonImage} alt="Image alt" />
        </PrevButton>
        <NextButton
          onClick={() => {
            console.log("next Click");
            console.log(pos);
            if (pos >= -385) {
              return;
            } else {
              pos - 70;
              return pos;
            }
          }}
        >
          <img className="nextBtn" src={buttonImage} alt="Image alt" />
        </NextButton>
      </ButtonWrapper>
      <a.div>
        <ProductWrapper>
          {data.items.map(({ type, id }) => {
            const item = state.source[type][id];
            return <Item key={item.id} item={item} />;
            //            return <div key={item.id}>{item.id}</div>
          })}
        </ProductWrapper>
      </a.div>
    </Store>
  );
};

export default connect(ProductArchive);

const ProductWrapper = styled.div`
  transform: translateX(${pos}vw);
  display: flex;
  position: absolute;
`;

const Store = styled.div`
  display: flex;
`;

const ButtonWrapper = styled.div`
  display: flex;
  width: 70vw;
  position: absolute;
  top: 30vh;
  left: 15vw;
  justify-content: space-between;
  z-index: 999;
`;

const PrevButton = styled.div``;

const NextButton = styled.div`
  .nextBtn {
    transform: rotate(180deg);
  }
`;
2

Ok so my javascript skills are still bad but i have tried a few different things. I have got to this stage and now i have a issue with a typeerror

import React from "react";
import { connect, styled, useState } from "frontity";
import Item from "./list-item";
import buttonImage from "../design/assets/button.svg";

const ProductArchive = ({ state }) => {
  const data = state.source.get(state.router.link);

  let pos = 0;

  const [style, setStyle] = useState({
    transform: `translateX(${pos})`,
  });

  const moveProductWrapper = (val) => {
    let res = pos + val;
    setStyle({ ...style, transform: `translateX(${res}vw)` });
  };

  return (
    <Store>
      <ButtonWrapper>
        <PrevButton onClick={moveProductWrapper(70)}>
          <img src={buttonImage} alt="Image alt" />
        </PrevButton>
        <NextButton onClick={moveProductWrapper(-70)}>
          <img className="nextBtn" src={buttonImage} alt="Image alt" />
        </NextButton>
      </ButtonWrapper>
      <div>
        <ProductWrapper style={style}>
          {data.items.map(({ type, id }) => {
            const item = state.source[type][id];
            return <Item key={item.id} item={item} />;
          })}
        </ProductWrapper>
      </div>
    </Store>
  );
};

export default connect(ProductArchive);

const ProductWrapper = styled.div`
  display: flex;
  position: absolute;
`;

const Store = styled.div`
  display: flex;
`;

const ButtonWrapper = styled.div`
  display: flex;
  width: 70vw;
  position: absolute;
  top: 30vh;
  left: 15vw;
  justify-content: space-between;
  z-index: 999;
`;

const PrevButton = styled.div``;

const NextButton = styled.div`
  .nextBtn {
    transform: rotate(180deg);
  }
`;

TypeError: Object is not a function or its return value is not iterable

line 11

any help would be amazing

5

Hi @John_Jordan :wave:!

It seems that your problem is caused by how you pass the onClick event handlers to <PrevButton /> and <NextButton />

Instead of:

<PrevButton onClick={moveProductWrapper(70)}>

<NextButton onClick={moveProductWrapper(-70)}>

do

<PrevButton onClick={() => moveProductWrapper(70)}>

<NextButton onClick={() => moveProductWrapper(-70)}>

Hope this helps! :slightly_smiling_face: