Как я могу отобразить свой обратный массив с помощью события onClick в React? - PullRequest
Новая
       18

Как я могу отобразить свой обратный массив с помощью события onClick в React?

0 голосов
/ 30 сентября 2019

Я извлек данные из API и сопоставил их, но я хочу изменить порядок, когда пользователь нажимает MARKET CAP. Я хочу, чтобы пользователь щелкнул

<div>MARKET CAP</div>

вниз в коде, который я хочу заменить этот массив, я сопоставляю: {props.coins.filter(searchingFor(search)).map... с обратным, который я сделал: 

const [reverseCoin, setReverseCoin] = useState( 
 [...coin].filter(searchingFor(search)).reverse()
);

Я понятия не имею, как заменить исходные данные на обращенные, чтобы любые предложения были бы полезны. Я использую React, стилизованные компоненты и крючки. Вот мой код: 

import Button from "../../UI/Forms/Button/Button";
import styled from "styled-components";
import Icon from "../../assets/images/sort-solid.svg";
import SearchIcon from "../../assets/images/search-solid.svg";
import * as Styles from "../../components/Table/Tables.styles";
import { Link } from "react-router-dom";
import "./PriceList.scss"; 


function searchingFor(search) {
return function(x) {
 return x.name.toLowerCase().includes(search.toLowerCase()) || false;
};
} 

//MY FUCTIONAL COMPONENT*************

//one prop has been passed to this which I called it "coins"

const PriceList = props => {
console.log(props.coins);
const [coin, setCoin] = useState([]);
const [color, setColor] = useState("");
const [MarketCapLow, setMarketCapLow] = useState(false);
const [search, setSearch] = useState("");

/// this is the variable that holds the reversed array

const [reverseCoin, setReverseCoin] = useState( 
 [...coin].filter(searchingFor(search)).reverse()
);
const timeIntervels = ["1H", "24H", "1W", "1M", "1Y"];

useEffect(() => {
 setCoin(props.coins);
}, [props.coins]);

const updateSearch = e => {
 setSearch(e.target.value);
};



const handleClick = name => {
 setColor(name);
};

//creating a table for my data********

return (
 <TableContainer>
   <SearchBarMainContainer>
     <SearchBarContainer>
       <SearchInputContainer>
         <img
           src={SearchIcon}
           width="20"
           height="20"
           style={{ marginRight: "16px" }}
         />

         <SearchBarInput
           type="text"
           value={search}
           onChange={updateSearch}
           placeholder="Search coins..."
         />
       </SearchInputContainer>
       <SearchPriceChange>
         {timeIntervels.map(d => (
           <SearchPriceChangeItems
             id={d}
             onClick={() => {
               handleClick(d);
             }}
             className={color === d ? "purple" : "black"}
           >
             {d}
           </SearchPriceChangeItems>
         ))}
       </SearchPriceChange>
     </SearchBarContainer>
   </SearchBarMainContainer>

   <Styles.Tablestyles>
     <tbody>
       <Styles.TableRowStyles bg>
         <Styles.TabelHeadingStyles bg>#</Styles.TabelHeadingStyles>
         <Styles.TabelHeadingStyles bg>NAME</Styles.TabelHeadingStyles>
         <Styles.TabelHeadingStyles bg>PRICE</Styles.TabelHeadingStyles>
         <Styles.TabelHeadingStyles bg>CHANGE</Styles.TabelHeadingStyles>
         <Styles.TabelHeadingStyles bg>
           <Styles.MarketCap
             onClick={() => {
               setMarketCapLow(!MarketCapLow);

             }}
           >
             <div>MARKET CAP</div>
             <CoinIcon width height src={Icon} />
           </Styles.MarketCap>
         </Styles.TabelHeadingStyles>
         <Styles.TabelHeadingStyles bg>TRADE</Styles.TabelHeadingStyles>
       </Styles.TableRowStyles>

       {props.coins.filter(searchingFor(search)).map(coin => {
         const {
           rank,
           logo_url,
           name,
           ["1d"]: { price_change_pct },
           currency,
           price,
           market_cap
         } = coin;
         const newMarketPct = (price_change_pct * 100).toFixed(2);
         const newPrice = Math.floor(price * 100) / 100;
         const newMarketCap =
           Math.abs(market_cap) > 999999999
             ? Math.sign(market_cap) *
                 (Math.abs(market_cap) / 1000000000).toFixed(1) +
               "B"
             : Math.sign(market_cap) * Math.abs(market_cap);
         return (
           <Styles.TableRowStyles key={rank}>
             <Styles.TabelDataStyles>{rank}</Styles.TabelDataStyles>
             <Styles.TabelDataStyles grey flex>
               <CoinIcon style={{ marginRight: "12px" }} src={logo_url} />
               {name} ({currency})
             </Styles.TabelDataStyles>

             <Styles.TabelDataStyles>${newPrice}</Styles.TabelDataStyles>

             <Styles.TabelDataStyles
               style={
                 price_change_pct.charAt(0) === "-"
                   ? { color: "#ff2734" }
                   : { color: "#23cc9a" }
               }
             >
               {newMarketPct}%
             </Styles.TabelDataStyles>
             <Styles.TabelDataStyles>${newMarketCap}</Styles.TabelDataStyles>

             <Styles.TabelDataStyles>
               <Link to={`/prices/${coin.currency}`}>
                 <Button padding style={{ width: "60%" }}>
                   Trade
                 </Button>
               </Link>
             </Styles.TabelDataStyles>
           </Styles.TableRowStyles>
         );
       })}
     </tbody>
   </Styles.Tablestyles>
 </TableContainer>
);
}

1 Ответ

0 голосов
/ 30 сентября 2019

Я бы порекомендовал просто использовать флаг, хранящийся в вашем штате, чтобы переключать способ отображения массива. Это позволяет избежать хранения обоих массивов в вашем состоянии, когда они, по сути, являются одними и теми же данными. Конечно, вам нужно создать обработчик щелчков, чтобы изменить значение флага reversed и разместить его там, где вы хотите, чтобы щелчок происходил, но я не вижу, где это находится в вашем коде. 

[reversed, setReversed] = useState(false);

...
// declare this variable somewhere inside your component outside the return statement. 
// You have create a copy to prevent reverse() from mutating the prop in place.
const displayedCoins = reversed ? Array.from(props.coins).reverse() : props.coins;

...

{displayedCoins.filter(searchingFor(search)).map((coin) => { ... });
...