CODEWITHSUNDEEP
reactjsreduxnext.js
Komail Fayazbakhsh
Komail Fayazbakhsh

Reputation: 374

what is the best practice for handling states in ReactJs components

there are many states in one component and each of them affects on JSX that rendered. what is the best practice for handling this states and reduce if else conditions.

class AddressBody extends Component {

render() {
    let { addresses, showCart, deliveryTimeSetted, deleteAddress, deleteAddressResponse } = this.props;


if (showCart && Object.keys(showCart).length && "data" in showCart && showCart.data.items.length) {
      showCart.data.items.map((value, index) => {
        images.push(
          <div className="product-item">
            <img src={value.product.default_photo.photo_file.xsmall} />
          </div>
        );
      });
      leftMenuComponent = <LeftMenu showCart={showCart.data} />;
    }

if (deleteAddressResponse && !deleteAddressResponse.success) {
      alert(deleteAddressResponse.message);
      this.props.fetchData("", types.DELETE_ADDRESS_RESPONSE, false);
    }
if(addresses)...
if(deliveryTimeSetted) .....

return (......
....

Upvotes: 0

Views: 45

Answers (1)

Bob van &#39;t Padje
Bob van &#39;t Padje

Reputation: 734

I your have this many props in your component it's a sign that your component has too many responsibilities and it too big. Try to split up your component into multiple smaller components and pass the props to these components. In the smaller component you can handle all the edge-cases. This will make sure that all your component only have one responsibility and will keep your code readable, testable and maintainable.

If splitting your components makes you feel like you're passing a lot of props down your component-tree you might want to look at a state-management tool React Context or Redux.

Upvotes: 1

Related Questions