Is it possible to get array element from redux state using mapStateToProps?

Question

css

You need to get one of the elements of the state stored in redux by the router parameter. Currently wrote the following:

class CoinDetails extends React.Component {

  getCoinsDetails = () => {
    const coinSymbol = this.props.match.params.id;
    return this.props.coins.data.find(item => item.symbol === coinSymbol);
  }

  render(){
    const coin = this.getCoinsDetails();
    return (
      <div>
        {coin.name}
      </div>
    )
  }
}

const mapStateToProps = store => {
  return {
    coins: store.coins,
  }
}

export default connect(mapStateToProps)(CoinDetails);

In vue + vuex, this is easily implemented using getters.
The method described above works, but it seems to me not quite right, because it is not required to pull out almost the entire state of redux into props. I would like to use the getCoinsDetails function directly in mapStateToProps, but this is not possible. Is there any way to get out of this situation?

Answer 1

The answer is simple, you don't need to do anything with the picture, just rotate the block with the text
-webkit-transform: rotate(-45deg); //Chrome, Safari
-moz-transform: rotate(-45deg); //Firefox
-o-transform: rotate(-45deg); //Opera
-ms-transform: rotate(-45deg); //IE
transform: rotate(-45deg); //browsers without prefixes Adjust the
angle yourself.

Answer 2

I think something like this , if necessary with support for IE8

Answer 3

const coinSelector = (state, ownProps) =>
  state.coins.data.find(coin => coin.symbol === ownProps.match.params.id);

const mapStateToProps = (state, ownProps) => ({
  coin: coinSelector(state, ownProps),
});