Tip calculator app, developed with TypeScript and React

Hello, adding some feedback

• regarding typing in useState

const [tipRender, setTipRender] = useState<tipPor[]>([]); // good
const [billState, setBillState] = useState<string>(""); // no need for <string>
const [erroBill, setErroBill] = useState<boolean>(false); // no need for <boolean>
const [styleErrBill, setStyleErrBill] = useState<styleErr>(); 
// here we could use null to handle when there is no error. It is a bit more verbose, but shows that error is null, i.e no error initially.
const [styleErrBill, setStyleErrBill] = useState<styleErr | null>(null); 

• Don't add types inside React components, either on top of the file or in another file depending on if it is used in multiple places or not.
• const initialState - defined that also outside of the component
• use CapitalCase for typescript type names
• extract functions like trunc in different files like helpers or similar, they don't need to be defined inside the component. Keep functions like handleClick, which use components specific variables.
• useMessage("Can't be zero"); - messages can be defined as variables and exported from another file
• avoid deeply nested if's - in validationInput you have 3 levels deep ifs. Try to rewrite the function to avoid so much complexity.
• function calcSimpleTip(): void if the function returns void, it doesn't need to be explicitly typed, it will be inferred from TS compiler.
• in calcSimpleTip why billStateConvert and the other variables are defined with let ? Firstly, they can be const, also their type will be inferred. For example const billStateConvert = validationInput(billState, setErroBill, setErrMessBill); // will also have type number
• Avoid casting variables to a type. It should be used only in rare cases, when there are no other options ( casting is ) let calctip = (billStateConvert * (porcentConvert / 100)) / peopleStateConvert; Here calctip doesnt need to be casted to number, because its type is inferred from the expression. Typescript is smart.
• Again function resetStatusTip(): tipPor[] doesn't need to have explicit return type.
• Regarding PartOneInput. Doesn't need to have type='text' since it it the default input prop. onBlur and onClick have e , but it is not used.

Overall, good job. I would suggest the following:

• split the application in smaller components
• use useReducer function to handle the logic
• refine Typescript knowledge a bit - it is endless, really, just a bit.

Hello! 👋

When I type in the number of people I should get the result right away, but unfortunately it only shows up when I press on the result panel. Maybe try to use .oninput event in a function on your input.

Something like this in example: numberOfPeople.oninput = () => { }

Cheers!