We Keep Coding

How to align Text in React Native

I'm trying to style my work, I've included a slug description now and simply hardcoded it in whilst I try to make it look better. I'm having two problems that I'm looking to resolve. I can't get the slug text to align between one another. And the second issue is that when it is took long it wraps and distorts everything, I'd rather it reduced down and showed an ellipsis (...) are these things achieveable?
import { StyleSheet, Text, View, FlatList, SafeAreaView, Image } from 'react-native'
export default function App() {
const present = [{
id: 1,
name: 'PresentOne',
slug: 'PresentOne Slug',
image: require('../assets/present.jpeg')
},
{
id:2,
name: 'PresentTwo',
slug: 'PresentTwo Slug',
image: require('../assets/present2.jpeg')
},
{
id:3,
name: 'PresentThree',
slug: 'PresentThree Slug',
image: require('../assets/present3.jpeg')
},
{
id:4,
name: 'PresentFour',
slug: 'PresentFour Slug',
image: require('../assets/present4.jpeg')
},
{
id:5,
name: 'PresentFive',
slug: 'PresentFive Slug',
image: require('../assets/present5.jpeg')
},
];
const onePresent = ( { item } ) => (
<View style={styles.item}>
<View style={styles.avatarContainer}>
<Image source = {item.image} style={styles.avatarContainer}/>
</View>
<Text style={styles.name}> {item.name}</Text>
<Text style={styles.slug}>{item.slug}</Text>
</View>
)
const headerComponent = () => {
return <Text style={styles.listHeadline}>Presents</Text>
}
const itemSeperator = () => {
return <View style = {styles.seperator}/>
}
return (
<SafeAreaView >
<FlatList
ListHeaderComponentStyle={styles.listHeader}
ListHeaderComponent={headerComponent}
data = { present }
renderItem = { onePresent }
ItemSeperatorComponent = { itemSeperator }
ListEmptyComponent = { <Text>Empty</Text>}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
slug:{
transform: [{translateX: -100}],
// alignContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
name:{
transform: [{translateY: -30},{translateX: 10}],
fontSize: 20,
},
listHeadline:{
color:'#333',
fontSize: 21,
fontWeight: 'bold',
},
item: {
flex:1,
flexDirection:'row',
alignItems:'center',
paddingVertical:13,
},
avatarContainer:{
backgroundColor:'#D9D9D9',
borderRadius:100,
height:89,
width:89,
justifyContent:'center',
alignItems: 'center',
margin:10,
},
listHeader:{
height:55,
alignItems:'center',
justifyContent: 'center'
},
seperator: {
height: 1,
width: '100%',
backgroundColor: '#CCC',
}
})

The textAlign prop is what I think you want. However I noticed you were using transform to position the text in your view and I found a way to layout your components so that you dont have to do so (demo).
import {
StyleSheet,
Text,
View,
FlatList,
SafeAreaView,
Image,
} from 'react-native';
export default function App() {
const present = [
{
id: 1,
name: 'PresentOne',
slug: 'PresentOne Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 2,
name: 'PresentTwo',
slug: 'PresentTwo Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 3,
name: 'PresentThree',
slug: 'PresentThree Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 4,
name: 'PresentFour',
slug: 'PresentFour Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 5,
name: 'PresentFive',
slug: 'PresentFive Slug',
image: require('./assets/snack-icon.png'),
},
];
const onePresent = ({ item }) => (
<View style={styles.item}>
<View style={styles.avatarContainer}>
<Image source={item.image} style={styles.avatarContainer} />
</View>
<View style={styles.slug}>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.slug}>{item.slug}</Text>
</View>
</View>
);
const headerComponent = () => {
return <Text style={styles.listHeadline}>Presents</Text>;
};
const itemSeperator = () => {
return <View style={styles.seperator} />;
};
return (
<SafeAreaView>
<FlatList
ListHeaderComponentStyle={styles.listHeader}
ListHeaderComponent={headerComponent}
data={present}
renderItem={onePresent}
ItemSeperatorComponent={itemSeperator}
ListEmptyComponent={<Text>Empty</Text>}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
slug: {
// transform: [{translateX: -100}],
// alignContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
name: {
// transform: [{translateY: -30},{translateX: 10}],
fontSize: 20,
},
listHeadline: {
width: '100%',
color: '#333',
fontSize: 21,
fontWeight: 'bold',
},
item: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 13,
},
avatarContainer: {
backgroundColor: '#D9D9D9',
borderRadius: 100,
height: 89,
width: 89,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
},
listHeader: {
height: 55,
alignItems: 'center',
justifyContent: 'center',
},
seperator: {
height: 1,
width: '100%',
backgroundColor: '#CCC',
},
});

Notification Screen- There are three different text in one line (Two Text near to each other and the third text to be float on right) in react native

Notification Screen- There are three different text in one line (Two Text near to each other and the third text to be float on right) in react native.
I am trying to float the text on right in the same line and align all right. What it can be. there is no option of floating text in react-native.
import React from "react";
import { StyleSheet, Text, View, FlatList, Image } from "react-native";
import Header from "../components/Header";
export default function Notifications() {
const data = [
{
id: "1",
post_title: "Best practice",
avatar: "../assets/avatar-placeholder.png",
username: "Bilal Majeed",
category: "Management",
notification: "Liked your post",
time: "Now",
},
{
id: "2",
post_title: "Best practice",
avatar: "../assets/avatar-placeholder.png",
username: "Amna Yasir",
category: "Special Volunteer",
notification: "shared your post ",
time: "Now",
},
{
id: "3",
post_title: "Best practice",
avatar: "../assets/avatar-placeholder.png",
username: "Amna Yasir",
category: "Special Volunteer",
notification: "commented on your post",
time: "5 min ago",
},
{
id: "4",
post_title: "Best practice",
avatar: "../assets/avatar-placeholder.png",
username: "Abbas S.",
category: "Management",
notification: "is now following you",
time: "15 min ago",
},
{
id: "5",
post_title: "Best practice",
avatar: "../assets/avatar-placeholder.png",
username: "Abbas S.",
category: "Management",
notification: "like your post",
time: "35 min ago",
},
];
return (
<View>
<View style={styles.container}>
<Header title={"Notifications"} />
</View>
<FlatList
data={data}
keyExtractor={(item, index) => {
return index.toString();
}}
renderItem={({ item }) => {
return (
<View style={styles.mainBody}>
<View style={styles.singleNotification}>
<Image
style={styles.avatar}
source={require("../assets/avatar-placeholder.png")}
/>
<View style={styles.mainContent}>
<View style={styles.notificationHead}>
<Text style={styles.userName}>{item.username}</Text>
<Text style={styles.categoryText}>{item.category}</Text>
<Text style={styles.timeText}>{item.time}</Text>
</View>
<View>
<Text style={styles.notification}>{item.notification}</Text>
</View>
</View>
</View>
<View style={styles.hairLine} />
</View>
);
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
},
mainBody: {
alignContent: "center",
alignItems: "center",
},
singleNotification: {
paddingHorizontal: 9,
flexDirection: "row",
alignItems: "center",
width: 330,
height: 62,
backgroundColor: "#fff",
marginTop: 10,
},
avatar: {
width: 35,
height: 35,
borderRadius: 35 / 2,
},
notificationHead: {
flexDirection: "row",
alignItems: "baseline",
backgroundColor: "#eee",
},
userName: {
fontFamily: "Roboto",
fontSize: 14,
fontWeight: "700",
color: "#707070",
marginLeft: 11,
lineHeight: 18,
},
categoryText: {
fontFamily: "Roboto",
fontSize: 11,
fontWeight: "400",
color: "#4582C3",
marginLeft: 11,
},
timeText: {
position: "relative",
right: 0,
fontFamily: "Roboto",
fontSize: 11,
fontWeight: "400",
color: "#707070",
opacity: 0.7,
marginLeft: 11,
textAlign: "left",
},
notification: {
fontFamily: "Roboto",
fontSize: 12,
fontWeight: "400",
color: "#707070",
marginLeft: 11,
lineHeight: 18,
},
hairLine: {
alignContent: "center",
padding: 0,
marginTop: 15,
width: "100%",
height: 2,
opacity: 0.5,
backgroundColor: "#eee",
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>
/*
[UI design ss][1]
[1]: https://i.stack.imgur.com/eM5Lk.png */

you can float something using position: "absolute", zindex: 1 and then align it left or right using top: 0, right:0
so your code should look something like this for floating text on right top
floatingComp: {
position: 'absolute',
zindex: 1,
top: 0,
right: 0,
},

How do I convert styling from makeStyles to new styled API in MUI 5?

I am trying to convert a MUI 4 component to use the new styled API after migrating to MUI 5 but I’m getting lost on how I can pass specific props to the styled API like I was able to do using makeStyles previously. Can someone help me out there?
This is the component as it was when using makeStyles in MUI 4:
import React from 'react';
import PropTypes from 'prop-types';
import MuiTypography from '#material-ui/core/Typography';
import { makeStyles } from '#material-ui/core/styles';
import Colors from 'Colors/index';
const acceptedColors = [...Object.values(Colors.gray), Colors.white];
export const variantMapping = {
'2xl': {
element: 'h1',
styles: {
primary: {
fontSize: 81,
lineHeight: '120%',
letterSpacing: '-2px',
},
secondary: {
fontSize: 81,
lineHeight: '120%',
letterSpacing: 0,
},
},
},
xl: {
element: 'h2',
styles: {
primary: {
fontSize: 54,
lineHeight: '120%',
letterSpacing: '-1px',
},
secondary: {
fontSize: 54,
lineHeight: '120%',
letterSpacing: 0,
},
},
},
lg: {
element: 'h3',
styles: {
primary: {
fontSize: 36,
lineHeight: '120%',
letterSpacing: '-0.75px',
},
secondary: {
fontSize: 36,
lineHeight: '120%',
letterSpacing: 0,
},
},
},
md: {
element: 'h4',
styles: {
primary: {
fontSize: 24,
lineHeight: '130%',
letterSpacing: '-0.5px',
},
secondary: {
fontSize: 24,
lineHeight: '140%',
letterSpacing: 0,
},
},
},
sm: {
element: 'p',
styles: {
primary: {
fontSize: 16,
lineHeight: '140%',
letterSpacing: 0,
},
secondary: {
fontSize: 16,
lineHeight: '140%',
letterSpacing: 0,
},
},
},
xs: {
element: 'h5',
styles: {
primary: {
fontSize: 14,
lineHeight: '140%',
letterSpacing: 0,
},
secondary: {
fontSize: 14,
lineHeight: '140%',
letterSpacing: 0,
},
},
},
'2xs': {
element: 'h6',
styles: {
primary: {
fontSize: 12,
lineHeight: '140%',
letterSpacing: 0,
},
secondary: {
fontSize: 12,
lineHeight: '140%',
letterSpacing: 0,
},
},
},
};
const useStyles = makeStyles(() => ({
root: ({ variant, isBold, font, color }) => {
const baseStyles = {
fontWeight: isBold || font === 'secondary' ? 700 : 'normal',
fontFamily: font === 'secondary' ? ['"Lora"', 'serif'].join(',') : ['"Karla"', 'sans-serif'].join(','),
};
// If an unsupported variant is supplied, default to the `sm` font variant
if (!Object.keys(variantMapping).includes(variant)) {
// eslint-disable-next-line no-param-reassign
variant = 'sm';
}
const variantStyles = variantMapping[variant].styles[font];
// If an unsupported color is supplied, default to the gray[500]
let colorHexCode = color;
if (!acceptedColors.includes(color)) {
const { '500': gray500 } = Colors.gray;
colorHexCode = gray500;
}
return { ...baseStyles, ...variantStyles, color: colorHexCode };
},
}));
const Typography = React.forwardRef(function Typography(
{ children, variant, className, component, isBold, font, canWrap, color, ...props },
ref,
) {
const classes = useStyles({ variant, isBold, font, color });
return (
<MuiTypography
{...props}
classes={classes}
component={component || variantMapping[variant].element}
className={className}
noWrap={!canWrap}
ref={ref}
>
{children}
</MuiTypography>
);
});
Typography.propTypes = {
children: PropTypes.node.isRequired,
variant: PropTypes.oneOf(Object.keys(variantMapping)),
component: PropTypes.string,
className: PropTypes.string,
isBold: PropTypes.bool,
font: PropTypes.oneOf(['primary', 'secondary']),
canWrap: PropTypes.bool,
color: PropTypes.oneOf(acceptedColors),
};
Typography.defaultProps = {
isBold: false,
component: null,
className: '',
font: 'primary',
variant: 'sm',
canWrap: true,
color: Colors.gray[500],
};
export default Typography;
This is my start at trying to pass the props to the styled component, but it doesn't seem to be getting any values for those. What am I still missing?
const StyledMuiTypography = styled(MuiTypography)(({ theme, isBold, font }) => {
const baseStyles = {
fontWeight: isBold || font === 'secondary' ? 700 : 'normal',
fontFamily: font === 'secondary' ? ['"Lora"', 'serif'].join(',') : ['"Karla"', 'sans-serif'].join(','),
};
return baseStyles;
});

I'm unable to change states on switches inside ListItem component

What i'm trying to do is to list an array with multiple items, inside this component, and this array contains a boolean state for each individual item, like this.
items : {
"ISA InterChile" : [
{
key : '7843',
name : "ISA APP RRHH",
fav: false
},
{
key : '7844',
name : "Garantia y Obligaciones",
fav: false
},
{
key : '7855',
name : "Que se yo",
fav: true
},
{
key : '7899',
name : "Random",
fav: true
}
],
"DSAC Chile" : [
{
key : '5022',
name: 'ADAM RRHH',
fav: true
},
{
key : '5023',
name: 'Name of Project 4',
fav: false
}
],
"Banco BCI" : [
{
key : '1101',
name: 'Name of Project 3',
fav: false
},
{
key : '1014',
name: 'Name of Project 4',
fav: false
},
{
key : '1170',
name: 'Name of Project 5',
fav: false
},
{
key : '1033',
name: 'Name of Project 6',
fav: false
},
{
key : '1101',
name: 'Name of Project 7',
fav: false
},
{
key : '1014',
name: 'Name of Project 8',
fav: false
},
{
key : '1170',
name: 'Name of Project 9',
fav: false
},
{
key : '1033',
name: 'Name of Project 10',
fav: false
}
]
},
But whenever i try to change states, it immediately changes back to its previous state, this is the code.
{
this.state.items[this.state.SeleccionClientes].map(value => (
<ListItem
containerStyle={{backgroundColor: '#ffffff', width: widthPercentageToDP('87.1%'), height: 64, alignItems: 'center', justifyContent: 'center', alignSelf: 'center', marginTop: heightPercentageToDP('2.8%'), paddingHorizontal: 0}}
topDivider={false}
bottomDivider={true}
titleStyle={{
marginLeft: 0,
fontSize: 16,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 24,
letterSpacing: 0.15,
textAlign: "left",
color: "#707070"
}}
subtitleStyle={{
marginLeft: 0,
fontSize: 14,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 20,
letterSpacing: 0.25,
textAlign: "left",
color: "#c4c4c4"
}}
title={`${value.name}`}
subtitle={`ID ${value.key}`}
switch={{
value: value.fav, onValueChange: () => !value.fav
}}
/>
))
}
the this.state.SeleccionClientes is from a dropdown menu, where you select the item from items, and list you the items inside
EDIT: this is the whole view and code
import * as React from 'react';
import {View, Text, Image, StatusBar, SafeAreaView, TouchableOpacity, ScrollView, RefreshControl, FlatList} from 'react-native';
import { Header, ListItem } from 'react-native-elements';
import ModalDropdown from 'react-native-modal-dropdown';
import Images from '../../Assets/values/images';
import {
RFPercentage as rfp,
RFValue as rfv,
} from 'react-native-responsive-fontsize';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
heightPercentageToDP,
widthPercentageToDP,
} from 'react-native-responsive-screen';
import styles from '../../Assets/values/styles/HoursReport/ClientsProyects/ClientsProyectsStyle';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import DataManager from '../../../Util/CrossUtils/DataManager';
export default class ClientsProyectsScreen extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
items : {
"ISA InterChile" : [
{
key : '7843',
name : "ISA APP RRHH",
fav: false
},
{
key : '7844',
name : "Garantia y Obligaciones",
fav: false
},
{
key : '7855',
name : "Que se yo",
fav: true
},
{
key : '7899',
name : "Random",
fav: true
}
],
"DSAC Chile" : [
{
key : '5022',
name: 'ADAM RRHH',
fav: true
},
{
key : '5023',
name: 'Name of Project 4',
fav: false
}
],
"Banco BCI" : [
{
key : '1101',
name: 'Name of Project 3',
fav: false
},
{
key : '1014',
name: 'Name of Project 4',
fav: true
},
{
key : '1170',
name: 'Name of Project 5',
fav: false
},
{
key : '1033',
name: 'Name of Project 6',
fav: false
},
{
key : '1102',
name: 'Name of Project 7',
fav: true
},
{
key : '1114',
name: 'Name of Project 8',
fav: false
},
{
key : '1175',
name: 'Name of Project 9',
fav: false
},
{
key : '1303',
name: 'Name of Project 10',
fav: false
}
]
},
SeleccionClientes: '',
}
}
updateFav = item => {
const newData = this.state.items[this.state.SeleccionClientes];
const uodatedItem = newData.find(x => x.key === item.key);
uodatedItem.fav = !item.fav;
this.setState({ data: newData });
//You can also have a callback from parent component to update parent state
};
render() {
return (
<>
<StatusBar translucent backgroundColor="transparent" />
<SafeAreaView style={{backgroundColor: '#fafafa'}}/>
{/*
<Header
backgroundImage={Images.header_nav}
backgroundImageStyle={styles.HeaderImagenCP}
leftComponent={
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<View><Image style={styles.HeaderHorizontal} source={Images.back}/></View>
</TouchableOpacity>
}
centerComponent={{text: 'Imputar horas', ellipsizeMode: 'clip', style: styles.HeaderHoursReportCP }}
placement='center'
/>
*/}
<View style={styles.ContainerBackground}>
<View style={{flexDirection: 'row'}}>
<View style={{alignItems: 'flex-start', justifyContent: 'flex-start', alignSelf: 'flex-start', marginTop: heightPercentageToDP('2.2%'), marginLeft: widthPercentageToDP('6.3%')}}>
<Text style={{
fontSize: 18,
fontWeight: "500",
fontStyle: "normal",
lineHeight: 35,
letterSpacing: 0,
textAlign: "left",
color: "#707070"
}}>Proyectos</Text>
</View>
<TouchableOpacity style={{position: 'absolute', alignItems: 'flex-end', justifyContent: 'flex-end', alignSelf: 'flex-end', paddingBottom: heightPercentageToDP('0.5%'), left: widthPercentageToDP('90%')}} onPress={() => this.props.navigation.goBack()}>
<Image source={Images.close_modal}/>
</TouchableOpacity>
</View>
<KeyboardAwareScrollView
keyboardShouldPersistTaps="handled"
enableOnAndroid={true}>
{/*
<View style={{alignItems: 'flex-end', justifyContent: 'flex-end', alignSelf: 'flex-end', marginRight: widthPercentageToDP('6.3%')}}>
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Image source={Images.close_modal}/>
</TouchableOpacity>
</View>
*/}
<View style={styles.Left}>
<Text style={styles.TituloInputOnBlur}>Cliente</Text>
</View>
<View style={styles.Center}>
<ModalDropdown
dropdownTextStyle={styles.dropdownTextStyle}
dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
defaultValue={'Seleccionar'}
style={styles.dropStyle}
textStyle={{
padding: 0,
margin: 0,
fontSize: rfv(16),
paddingVertical: hp('1.2%'),
fontWeight: 'normal',
fontStyle: 'normal',
textAlign: 'left',
//color: Motivo != 'Seleccionar' ? '#1a1a1a' : '#c4c4c4',
}}
onSelect={(index, value) => this.setState({SeleccionClientes: value})}
options={Object.keys(this.state.items)}
/>
</View>
<View>
{
this.state.SeleccionClientes !== '' ?
<View>
{
<FlatList
data={this.state.items[this.state.SeleccionClientes]}
renderItem={({item, index}) => (
<ListItem
containerStyle={{backgroundColor: '#fafafa', width: widthPercentageToDP('87.1%'), height: 64, alignItems: 'center', justifyContent: 'center', alignSelf: 'center', marginTop: heightPercentageToDP('2.8%'), paddingHorizontal: 0}}
topDivider={false}
bottomDivider={true}
titleStyle={{
marginLeft: 0,
fontSize: 16,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 24,
letterSpacing: 0.15,
textAlign: "left",
color: "#707070"
}}
subtitleStyle={{
marginLeft: 0,
fontSize: 14,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 20,
letterSpacing: 0.25,
textAlign: "left",
color: "#c4c4c4"
}}
title={`${item.name}`}
subtitle={`ID ${item.key}`}
switch={{
//trackColor: {false: "#767577", true: "#81b0ff"},
//thumbColor: item.fav ? "#1062cc" : "#f4f3f4",
value: item.fav[index],
onValueChange: () => {this.updateFav(item)}
}}
/>
)}
/>
}
</View>
:
<View style={{alignItems: 'center', justifyContent: 'center', alignSelf: 'center'}}>
<View style={{marginTop: heightPercentageToDP('11%')}}>
<Image style={{marginBottom: heightPercentageToDP('2.8%')}} source={Images.sad_face}/>
</View>
<Text style={{
fontSize: 18,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 35,
letterSpacing: 0,
textAlign: "left",
color: "#c4c4c4"
}}>Sin proyectos activos</Text>
</View>
}
</View>
<View style={styles.BottomPush} />
</KeyboardAwareScrollView>
</View>
</>
);
}
}

You are not updating the state, your switch takes the value from the state object. And better use a flat list instead of map as its good in terms of performance. This will be a sample approach that you can take.
class CustomFlatList extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
};
}
updateFav = item => {
const newData = [...this.state.data];
const uodatedItem = newData.find(x => x.key === item.key);
uodatedItem.fav = !item.fav;
this.setState({ data: newData });
//You can also have a callback from parent component to update parent state
};
render() {
return (
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
title={`${item.name}`}
subtitle={`ID ${item.key}`}
switch={{
value: item.fav,
onValueChange: () => this.updateFav(item),
}}
/>
)}
/>
);
}
}
--Updated code after full code
You will have to update the updateFav function as below.
updateFav = item => {
const newData = [...this.state.items[this.state.SeleccionClientes]];
const updateItem = newData.find(x => x.key === item.key);
updateItem.fav = !item.fav;
const updatedArray = Object.assign(this.state.items);
updatedArray[this.state.SeleccionClientes] = newData;
this.setState({ items: updatedArray });
};

Creating a React Table with functional Components in React.js

I'm new to this coding world and trying to learn Javascript and its frameworks. I'm trying to create a React table with functional components. I am able to create the table fine but the data is not rendering, tried using the fetch hook method. Can anyone help me out with something else ? Here is the code:
import React, { useState, useEffect } from "react";
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import '../components/mystyle.css'
const FunctionalComponent = () => {
const [employees, setEmployees] = useState({});
const [isError, setErrors] = useState(false)
useEffect(() => {
async function fetchData() {
const res = await fetch("http://localhost:7000/employees");
res
.json()
.then(res => setEmployees({employeeDetails: res}))
.catch(err => setErrors(err));
}
fetchData();
}, []);
useEffect(() => {
async function fetchData() {
const resctc = await fetch("http://localhost:7000/employee/ctc");
resctc
.json()
.then(resctc => setEmployees({totalCtc: resctc}))
.catch(err => setErrors(err));
}
fetchData();
}, []);
const columns = [
{
Header: "EmployeeID",
accessor: "EmployeeId",
style: {
textAlign: 'center',
}
},
{
Header: "Name",
accessor: "name",
style: {
textAlign: 'center'
}
},
{
Header: "Project",
accessor: "Project",
style: {
textAlign: 'center'
}
},
{
Header: "Experience",
accessor: "experience",
style: {
textAlign: 'center'
}
},
{
Header: "Salary",
accessor: "salary",
style: {
textAlign: 'center'
}
},
{
Header: "DateofJoining",
accessor: "DOJ",
style: {
textAlign: 'center'
}
},
{
Header: "Blood Group",
accessor: "Blood group",
style: {
textAlign: 'center'
}
},
{
Header: "Actions",
Cell: props => {
return (
<button style={
{
backgroundColor: 'white',
color: "red",
textAlign: 'center'
}
}
>
View
</button>
)
},
width: 100,
maxWidth: 100,
minWidth: 100,
}
]
return (
<div>
<div style={{ display: 'flex',
justifyContent: "space-between",
maxWidth: '100',
maxHeight: '100',
padding: '20px',
backgroundColor: '#fefefe'
}}>
<img src={Logo} alt={Logo} maxWidth='30px' />
</div>
<div class="container-fluid" >
<div style={
{
display: 'flex',
justifyContent: "space-between",
margin: '10px'
}
}>
<div style={
{
maxWidth: '100',
fontSize: '2vw',
color: 'red'
}
}>Employee List</div>
<div style={
{
background: 'linear-gradient(to right, #f0f0f0 50%, blue 50%)',
textAlign: 'center',
maxWidth: '100',
border: '1px solid blue',
borderRadius: '35px',
padding: '10px',
}
}>
<span style={
{
color: 'blue',
fontSize: '16px',
padding: '5px 24px',
borderRadius: '35px'
}
}
>Total CTC</span>
<span style={
{ color: 'white', fontSize: '16px', padding: '5px 24px', borderRadius: '35px' }
}
>{employees.totalCtc}/-</span>
</div>
</div>
<ReactTable columns={columns} data={employees.employeeDetails} defaultPageSize={10}></ReactTable>
</div>
<div>
<span>{JSON.stringify(employees)}</span>
<hr />
<span>Is Error: {JSON.stringify(isError)}</span>
</div>
</div>
)
}
export default FunctionalComponent;