4
\$\begingroup\$

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?
\$\endgroup\$

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.