JSFiddle - React, Tailwind, and code Playground

by Trevor Power

Babel + JSX

const nextProps = {
  isDisabled: true,
  buttonStates: {
  	ForeColor: false,
  	BackColor: true
  },
  colorState: {
    foregroundColor: "red",
    backgroundColor: "red"
  }
};

const colorState  = ({isDisabled}) => {
  const state = {};
  
  
  return state;
}

var name = "Fore";

const {
	isDisabled,
  buttonStates: {
  	[name + "Color"]: buttonState,
  	BackColor: backColorState
  },
  colorState: {
  	foregroundColor, backgroundColor
  }
} = nextProps; 

const foreState = {
  foreColorDisabled: isDisabled || foreColorState,
  selectedForeColor: foregroundColor
};//colorState("foreColorDisabled");


//foreState.foreColorDisabled = nextProps.isDisabled || (nextProps.buttonStates !== null && 	    !nextProps.buttonStates.ForeColor);

//if (!foreState.foreColorDisabled) {
  //foreState.selectedForeColor = nextProps.colorStates.foregroundColor;
//}

const backState = {};

backState.backColorDisabled = nextProps.isDisabled || !(nextProps.buttonStates === null || nextProps.buttonStates.BackColor);

if (!backState.backColorDisabled) {
  backState.selectedBackColor = nextProps.colorStates.backgroundColor;      
}

const newState = {...foreState, ...backState};

document.body.innerText = JSON.stringify(newState);