리엑트에서 정렬(sort)

[손민빈]

react에서 sort를 통해 정렬 기능을 추가하려고 하고 있습니다.

낮은가격순으로 배열을 바꾸고 변수 template 에 넣어서 append를 통해 넣을려고 했는데, 웹에는 태그 써있는 그대로 나오더라구요.

어떻게 해야 할까요?

 

var bean = [
    { id: 0, title: 'Bean_A', content: 'Body and Flavor, 200g', price: 11000},
    { id: 1, title: 'Bean_B', content: 'Acidity and Flavor, 200g', price: 12000 },
    { id: 2, title: 'Bean_C', content: 'Decaf, 200ga', price: 13000}
];

<div className="text-left">
                    <Form.Select size="sm" id="option" onChange={(e)=>{
                        var selectedSort = e.target.value;
                        console.log(selectedSort)

                        if (selectedSort == '낮은가격순') {

                            document.querySelector('.bean-group').innerHTML='';
                           
                            props.bean.sort(function(a,b){
                                return a.price - b.price;
                            })

                           
                                props.bean.map((a,i)=>{
                                   
                                        var template = `
                                        <div className="col-md-4">
                                            <img src=${require('./img/bean'+i+'.png').default} onClick=${() => { history.push('/detail/bean/' + props.bean[i].id) }}></img>
                                            <h5>${props.bean[i].title}</h5>
                                            <p>${props.bean[i].content}</p>
                                            <p>${props.bean[i].price}</p>
                                        </div>
                                        `;
                                        document.querySelector('.bean-group').append(template);
                                   
                                })
                        }
                    }}>
                        <option value="원래">정렬</option>
                        <option value="낮은가격순">낮은가격순</option>
                        <option value="높은가격순">높은가격순</option>
                    </Form.Select>
                </div>
               
                <div className="bean-group row">
                    {
                        props.bean.map((a, i) => {
                            return (
                                <div className="col-md-4">
                                    { history.push('/detail/bean/' + props.bean[i].id) }} width="100%"></img>
                                    <h5>{props.bean[i].title}</h5>
                                    <p>{props.bean[i].content}</p>
                                    <p>{props.bean[i].price}</p>
                                </div>
                            );
                        })
                    }
                </div>

[codingapple]

props는 변경하면 안됩니다

state를 정렬하면 됩니다 state변경함수쓰시면 됩니다 

[손민빈]

props를 변경하면 안된다고 하셔서 props로 받은 배열을 state에 넣었습니다.

그러고 sort를 통해 배열을 재배치했는데, bean-group(class명)에 데이터바인딩을 해야하는데 어떻게 해야할지 잘 모르겠습니다.

조금만 구체적으로 말씀 부탁드립니다!

틀린부분도 있으면 말씀 부탁드리겠습니다.

 

let [bean, setBean] = useState(props.bean);

 

<Form.Select size="sm" id="option" onChange={(e)=>{
                        var selectedSort = e.target.value;
                        console.log(selectedSort)

                        if (selectedSort == '낮은가격순') {

                            document.querySelector('.bean-group').innerHTML='';
                           
                            bean.sort(function(a,b){
                                return b.price - a.price;
                            })
                                bean.map((a,i)=>{
                                    return(
                                        <div className="col-md-4">
                                            { history.push('/detail/bean/' + props.bean[i].id) }}></img>
                                            <h5>{props.bean[i].title}</h5>
                                            <p>{props.bean[i].content}</p>
                                            <p>{props.bean[i].price}</p>
                                        </div>
                                    );
                                });
                            ;
                        }
                    }}>
                        <option value="원래">정렬</option>
                        <option value="낮은가격순">낮은가격순</option>
                        <option value="높은가격순">높은가격순</option>
                    </Form.Select>

 

<div className="bean-group row">
                    {
                        props.bean.map((a, i) => {
                            return (
                                <div className="col-md-4">
                                    { history.push('/detail/bean/' + props.bean[i].id) }} width="100%"></img>
                                    <h5>{props.bean[i].title}</h5>
                                    <p>{props.bean[i].content}</p>
                                    <p>{props.bean[i].price}</p>
                                </div>
                            );
                        })
                    }
                </div>

[codingapple]

보통 props는 state로 담아서 쓰진 않습니다

정렬버튼을 누르면 부모가 가진 bean이라는 state를 정렬하면 됩니다 

 

[글쓴이]

글