I'm using react to build a radar chart. found this editable source. But it is in react class components. I need to convert it to functional components.
Original Class component: enter link description here
I tried converting the class component to functional component but could not find a way to convert the following two methods in the class.
constructor(props) {
super(props);
this.state = {
data: this.processData(characterData),
maxima: this.getMaxima(characterData)
};
}
getMaxima(data) {
const groupedData = Object.keys(data[0]).reduce((memo, key) => {
memo[key] = data.map((d) => d[key]);
return memo;
}, {});
return Object.keys(groupedData).reduce((memo, key) => {
memo[key] = Math.max(...groupedData[key]);
return memo;
}, {});
}
processData(data) {
const maxByGroup = this.getMaxima(data);
const makeDataArray = (d) => {
return Object.keys(d).map((key) => {
return { x: key, y: d[key] / maxByGroup[key] };
});
};
return data.map((datum) => makeDataArray(datum));
}This is what I've tried so far:
const [data, setData] = useState(characterData);
const [maxima, setMaxima] = useState(characterData);
setMaxima = (data: any[]) => {
const groupedData = Object.keys(data[0]).reduce((memo, key) => {
memo[key] = data.map(d => d[key]);
return memo;
}, {});
return Object.keys(groupedData).reduce((memo, key) => {
memo[key] = Math.max(...groupedData[key]);
return memo;
}, {});
};
setData = (data: any[]) => {
const maxByGroup = setMaxima(data);
const makeDataArray = (d: { [x: string]: number }) =>
Object.keys(d).map(key => ({ x: key, y: d[key] / maxByGroup[key] }));
return data.map(datum => makeDataArray(datum));
};Can somebody please help me to convert these two methods to functions. The problem here is these are the set methods of useState functions.
You have to mention the functions in const in functional components. Try like below,
const [data, setData] = useState(characterData);
const [maxima, setMaxima] = useState(characterData);
const setMaxima1 = (data: any[]) => {
const groupedData = Object.keys(data[0]).reduce((memo, key) => {
memo[key] = data.map(d => d[key]);
return memo;
}, {});
setMaxima(value)
return Object.keys(groupedData).reduce((memo, key) => {
memo[key] = Math.max(...groupedData[key]);
return memo;
}, {});
};
const setData1 = (data: any[]) => {
const maxByGroup = setMaxima(data);
const makeDataArray = (d: { [x: string]: number }) =>
Object.keys(d).map(key => ({ x: key, y: d[key] / maxByGroup[key] }));
setData(Value)
return data.map(datum => makeDataArray(datum));
};
The most obvious thing to do is to just write them as regular functions and remove all the this in the code because they are already fairly pure functions:
function MyComponent (props) {
[data, setData] = useState(processData(characterData));
[maxima, setMaxima] = useState(getMaxima(characterData));
function getMaxima (data) {
const groupedData = Object.keys(data[0]).reduce((memo, key) => {
memo[key] = data.map((d) => d[key]);
return memo;
}, {});
return Object.keys(groupedData).reduce((memo, key) => {
memo[key] = Math.max(...groupedData[key]);
return memo;
}, {});
}
function processData (data) {
const maxByGroup = getMaxima(data);
const makeDataArray = (d) => {
return Object.keys(d).map((key) => {
return { x: key, y: d[key] / maxByGroup[key] };
});
};
return data.map((datum) => makeDataArray(datum));
}
}