How to show first letters of the firstname and lastname of the user in the list instead of image through json data using reactjs

Question

I'm new to reactjs, doing a small react app which should hold first letter of User's firstname and lastname using json data in reactjs. but i'm unable to do it... I getting functions for static data but not for dynamic.

json data:

[ { "id": 1, "firstname": "Avelino", "lastname": "Cajes", "position": ".Net Developer", },

{ "id": 2, "firstname": "Nilson", "lastname": "Audrey", "position": "C#", }

]

Can anyone help me to do this problem? Thanks in advance.

I want in this way

Answer 1

Install react-avatar :

npm install react-avatar

Then try adapting this code to suit your use case

import React from "react";
import Avatar from 'react-avatar';

let data = [ 
 { "id": 1, "firstname": "Avelino", "lastname": "Cajes", "position": ".Net Developer"}, 
 { "id": 2, "firstname": "Nilson", "lastname": "Audrey", "position": "C#", }
]

class MyComponent extends React.Component{
   state = {data}
   render(){
      return(
         <div>
            { this.state.data.map(item=>(
                  <Avatar name={item.firstname+" "+item.lastname} maxInitials={2}/>
              ))
            }
         </div>
      )
   }
}

You can find out more on how to use react-avatar here

Answer 2

I think this is what u asked for

pass this to text element: firstName.charAt(0).toUpperCase() +""+lastName.charAt(0).toUpperCase()

     import { LinearGradient } from 'expo-linear-gradient';
    
    <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style= 
 {styles.linearGradient}>
      <Text style={styles.buttonText}>
        
      </Text>
    </LinearGradient>
    
    // Later on in your styles..
    var styles = StyleSheet.create({
      linearGradient: {
        flex: 1,
        paddingLeft: 15,
        paddingRight: 15,
        borderRadius: 5
      },
      buttonText: {
        fontSize: 18,
        fontFamily: 'Gill Sans',
        textAlign: 'center',
        margin: 10,
        color: '#ffffff',
        backgroundColor: 'transparent',
      },
    });