0

Well, I create a project with react and redux. In the reducer inicialstate I have an array of objects. I distribute the items on screen using map, ok. But my main doubt is that I create a filter compoment with an input, but I dont know how can I filter the objects by title, I dont know how can I make it because my array is in reducer.

REDUCER

    const initialState = [
    {
        id: "01",
        cardImage: "https://static3.tcdn.com.br/img/img_prod/450860/muda_da_flor_camelia_rosa_1396_1_20190611093649.jpg",
        cardName: "Camélia",
        cardText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        fullText: "Camélia Lorem ipsum dolor sit amet, consectetur adipiscing elit, ",
        categoria: "Jardim",
    },   

    {
        id: "02",
        cardImage: "http://www.mundodeflores.com/images/coreopsis.jpg?phpMyAdmin=9ea091c51a5aa3cf876fb3cf0a5f7f3d",
        cardName: "Coreópsis",
        cardText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        fullText: " Coreópsis Lorem ipsum dolor sit amet, consectetur adipiscing elit, ",
        categoria: "Jardim",
    },  
]

const cardList = (state = initialState, action) => {
switch (action.type) {
    case " ":
        return [ ...state, action.payload];
    default:
        return state;
}
};

MainCard

export default function MainCard(props) {
  const classes = useStyles();



  return (
    <CardStyled className={classes.root}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt={props.cardName}
          height="140"
          image={props.cardImage}
          title={props.cardName}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {props.cardName}
          </Typography>
          <Typography variant="body2" color="blue" component="p">
            {props.cardText}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActionsStyled>
        <ButtonStyled size="small" color="primary">
          Comprar
        </ButtonStyled>
      </CardActionsStyled>
    </CardStyled>
  );
}

MainCard.propTypes = {
  cardName: PropTypes.object.isRequired,
  cardImage: PropTypes.object.isRequired,
  cardText: PropTypes.object.isRequired,
};

CardContainer

const CardContainer = (props) => {
    return (
        <MainContainer>
            {props.cardList.map(cardList => {
                return <MainCard
                            cardName={cardList.cardName} 
                            cardImage={cardList.cardImage}
                            cardText={cardList.cardText}
                />    
            })}
        </MainContainer>
    )

}
function mapStateToProps (state) {
    return{
      cardList: state.cardList,
    }
  }

Filter here, I dont know what to do, how can I filter the itens of reducer array?

const FilterbyName = () => {
    return (
        <Main>
            <InputStyled></InputStyled>
        </Main>

    )
}

Home

  class Home extends React.Component {
    render() {
        return(
            <div>
                 <Header />
                <Toolbar>
                    <Menu />
                    <FilterbyName />
                </Toolbar>
                <CardContainer />

            </div>
        )
    }
}
Caroline
  • 21
  • 3

0 Answers0