0

I have tsx file who is returning this:

return (
<>
<Container>
data.map((item, i) => {
                let fullNameLetters = item.fullName.substring(0, 2);
                if (item.fullName.indexOf(' ') > 0) {
                  fullNameLetters = item.fullName.split(' ')[0][0].toUpperCase() + item.fullName.split(' ')[1][0].toUpperCase();
                }
                return (
                  <Card {...item} key={i} nameInitials={fullNameLetters} content={item.content} />
                );
              }) 
</Container>
</>
)

my MapStateToProps is this:

const mapStateToProps = (state: ApplicationState) => ({
  data: state.persons.data
});

So my question is how to put this code in mapStateToProps?:

data.map((item, i) => {
                let fullNameLetters = item.fullName.substring(0, 2);
                if (item.fullName.indexOf(' ') > 0) {
                  fullNameLetters = item.fullName.split(' ')[0][0].toUpperCase() + item.fullName.split(' ')[1][0].toUpperCase();
                }
Kate
  • 288
  • 2
  • 4
  • 17
  • Well, you can simply augment item with the `fullNameLetters` property `data: state.persons.data.msp(item=> ({...item, fullNameLetters})` But this doesn't make a lot of sense and also creates additional performance issues because mapStateToProps executes on every state change. So you would need to also add memoization. Explain why you want it in first place? – Yury Tarabanko Mar 23 '21 at 15:08
  • Because the data from persons dont have that prop fullNameLetters. But the card component have prop fullNameLetters. – Kate Mar 23 '21 at 15:30
  • You can extract it to a function and just call it ` – Yury Tarabanko Mar 23 '21 at 15:33
  • You may not need to do that as suggested by @YuryTarabanko. But if you need something similar for other use cases. You should check this: https://github.com/reduxjs/reselect – Ajeet Shah Mar 23 '21 at 16:29

0 Answers0