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(){
    size: "small",
    shape: "rounded"
statics : {

  function getShape(shape){
    if(shape === "rounded"){
      return "59px";
      return "2px";
  function getSize(size){
    if(size === "large"){
      return "136px";
    }else if(size==="medium"){
      return "68px";
      return "34px";
render: function(){

  var borderpx = Avatar.getShape(this.props.shape);
  var imgpx = Avatar.getSize(this.props.size);
    <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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.