DEV Community: Tanmay Banerjee

KendoReactChallenge : Feedback Analyzer

Tanmay Banerjee — Fri, 26 Sep 2025 15:36:42 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

FeedbackAnalyzer is a streamlined SaaS web app that helps small and medium-sized businesses (SMBs) collect, analyze, and act on customer feedback from multiple channels like emails, surveys, and social media. It differentiates itself with "AI-assisted" sentiment mapping (using simple NLP rules or mock integrations like OpenAI APIs) to categorize feedback into themes (e.g. "Product Quality", "Service", "Prising"), predict churn risks, and suggest action items. Users upload or input feedback, view dashboards with trends, and export reports. The uniqueness comes from its "flow builder"—a visual tool to automate feedback loops, like triggering follow-up emails based on negative sentiment which could be future scope along with exporting a report.

Demo

Below is the codesandbox link of above describe app ::

codesandbox.io

Below are the screenshots ::

KendoReact Components Used

{ Switch } from "@progress/kendo-react-inputs";
{ ListBox } from "@progress/kendo-react-listbox";
{ Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
{ DropDownList, MultiSelect } from "@progress/kendo-react-dropdowns";
{ Input } from "@progress/kendo-react-inputs";
{ DatePicker } from "@progress/kendo-react-dateinputs";
{ Button } from "@progress/kendo-react-buttons";
{ Grid, GridColumn, GridToolbar } from "@progress/kendo-react-grid";

[Optional: Code Smarter, Not Harder prize category] AI Coding Assistant Usage

[Optional: RAGs to Riches prize category] Nuclia Integration

Showcase on LinkedIn

Tanmay Banerjee — Tue, 16 Jan 2024 19:49:51 +0000

Would you like to showcase your favorite piece of work on linkedIn ?

Have a look at the below video and support for more such info!

React functional component on change of one of prop value to empty object doesn't re-render / return its JSX

Tanmay Banerjee — Mon, 07 Jun 2021 12:24:25 +0000

Below is how my component looks like :

import React, { useEffect } from "react";
import { connect } from "react-redux";

const createSomeStr = ( someObj, someOtherObj ) => {
if ( someObj.someField ) {
// this has a whole lot of computing to create a string but
// for this example I am just making it simple

return someOtherObj.someField + someObj.someField;

}

return "";
};

const myFunctionalComponent = ( props ) => {

useEffect( () => {
    // this won't get called when someOtherObj is being set to blank.
     console.log( "on change of someOtherObj" );
}, [ someOtherObj ] );

return ( props.arrayOfObjects.map( ( obj, index ) => {
    return ( <div key={ "mKey"+ index }>
      <div>{ obj.someField }</div>
      <div>{ createSomeStr( obj, props.someOtherObj ) }</div>
    </div> )

})
};

export default connect( {
arrayOfObjects: state.someReducer.arrayOfObjects,
someOtherObj: state.someReducer.someOtherObj
}, {} )( myFunctionalComponent );

// my reducer looks something like this ( it works fine as expected as I can make that out from redux dev tools )
export default function ( state = { someOtherObj }, action ) {
let newSomeOtherObj = {};

if ( action.type === "SOME_TYPE" ) {

newSomeOtherObj = state.someOtherObj;

delete newSomeOtherObj[ action.payload ];
}

switch( action.type ) {

case "SOME_TYPE":
return {
...state,
someOtherObj: newSomeOtherObj
};

default:
return state;
}
};

In a functional component I have used two props one as arrayOfObjects and other is an someOtherObj.

What happens is :: arrayOfObjects get its values on mount, component re-renders with desired results;

someOtherObj get its object updated with a key on some event, component re-renders with the updated string in the second div;

someOtherObj get its value updated with a blank object ( verified from redux dev tools ), component doesn't re-render until arrayOfObject gets updated. No clue why it's not re-rendering on second update of someOtherObj ...

Update1 :: You can find my useEffect and it's comment ... As per me react isn't considering it to be an update event when someOtherObj is being set to blank. I am not getting the reason for such behavior ...

Update2 :: I did convert the same component using class and the same behavior remains. Can anyone let me know it is how react behaves in such scenarios ? Like for any of the prop object changes to blank object and react doesn't consider it to be an prop update and doesn't gets into update life cycle phase ?

update3 :: I found a solution to this as to keep a field set for the lifetime of the component.

So I made these changes to the reducer ...

export default function ( state = { someOtherObj }, action ) {
let newSomeOtherObj = { isAnyFieldPresent: false };

if ( action.type === "SOME_TYPE" ) {

newSomeOtherObj = {
...newSomeOtherObj,
...state.someOtherObj
};

delete newSomeOtherObj[ action.payload ];
}

switch( action.type ) {

case "SOME_TYPE":
return {
...state,
someOtherObj: newSomeOtherObj
};

default:
return state;
}
};

Doing this the component is now able to detect all the update to someOtherObj as it never finds that object to be empty.

But this seems to be a workaround.

Yet I would Like know why such behavior ? A change is a change being it converting an object to a blank object or just changing the field values of the object and if the component is to detect changes to that object and is to fire update life cycle phase then it should on both scenarios.

let me know if I am wrong with my understanding or any thing to this issue.

Thanks and regards, Tanmay.