I have a component that I want to render with certain styling based upon the props that it will receive. I'm currently defaulting the prop types, and then creating the styling at render as such:

 getDefaultProps: function(){  return{    size: "small",    shape: "rounded"  };},statics : {  function getShape(shape){    if(shape === "rounded"){      return "59px";    }else{      return "2px";    }  },  function getSize(size){    if(size === "large"){      return "136px";    }else if(size==="medium"){      return "68px";    }else{      return "34px";    }  }},render: function(){  var borderpx = Avatar.getShape(this.props.shape);  var imgpx = Avatar.getSize(this.props.size);  return(    <img src={this.props.img}  style={{"border-radius" : borderpx, height: imgpx}}  />  );}

What I'm trying to figure out:

1. Is this the correct way to "dynamically" render the style in React?
2. Is there anything in my code that I could do better?

0

Start asking to get answers

Find the answer to your question by asking.

Explore related questions

See similar questions with these tags.