Why Inline Styling style={{maxHeight:'443 px', maxWidth: '443 px'}} is not working in component

user_16267095 0
Viewed 489

Tysm for help in advance!
I am doing famous react Course of Coursera!
IN App.js Menu is rendered as Component. MenuComponent.js is as follows:

import React,{Component} from 'react';
import DishDetail from './DishDetail';
import { Card, CardImg,  CardImgOverlay} from 'reactstrap';
class Menu extends Component {

    constructor(props) {
        super(props);

        this.state = {
            selectedDish: null
        }
    }

    onDishSelect(dish) {
        this.setState({ selectedDish: dish});
    }

    renderDish() {
        if (this.state.selectedDish)
            return <DishDetail dish={this.state.selectedDish} />;
        else
            return(
                <div></div>
            );
    }

    render() {        
        const menu = this.props.dishes.map((dish) => {
            return (            
                <Card 
                    key={dish.id} 
                    className="col-12 col-md-5 m-1" 
                    onClick={() => this.onDishSelect(dish)}
                    >
                    <CardImg width="100%" className="card-img-top" src={dish.image} alt={dish.name} />
                    <CardImgOverlay className="card-image-overlay">
                        <h5>{dish.name}</h5>                      
                    </CardImgOverlay>
                </Card>                
            );
        });
        
        return (
            <div className="container">
                <div className="row">                     
                    {menu}                          
                </div>
                <div className="row">
                    <div classNmae="col-12 col-md-5 m-1">
                        {this.renderDish(this.state.selectedDish)}
                    </div>
                </div>
            </div>
        );
    }
}
export default Menu;

DishDetail.js is as follows:

import React, { Component } from 'react';
import { Card, CardImg,  CardText, CardBody,CardTitle} from 'reactstrap';
class DishDetail extends Component {
    
    render () {
        return (<div className="row">
                <div classname="col-6 col-md-4" >
                    <Card>
                        <CardImg style={{maxWidth:'443 px', maxHeight:'443 px'}} top src={this.props.dish.image} alt={this.props.dish.name} />
                        <CardBody>
                            <CardTitle>{this.props.dish.name}</CardTitle>
                            <CardText className="text-center">{this.props.dish.description}</CardText>
                        </CardBody>
                    </Card>
                </div>                  
                <div className="col-6 col-md-4">
                    <h3>Comments</h3>
                    {
                        this.props.dish.comments.map( (comment) => {
                            return (
                                <div id={comment.id}>
                                    <p>{comment.comment}</p>
                                    <p>--{comment.author} , {comment.date}</p>
                                </div>
                            )
                        })
                    }    
                </div>
                </div>                                            
        );
    }
}
export default DishDetail;

I want render Dish Detail and it's comments in form col-6 col-6 means side by side. But Instead of that, I am getting output like:- enter image description here


Desired Output is like: enter image description here


Tysm for solving in advance!

react-bootstrap bootstrap-4 reactjs inline-styles
2 Answers

Try to use it this way:

import React, { Component } from 'react';
import { Card, CardImg,  CardText, CardBody,CardTitle} from 'reactstrap';
class DishDetail extends Component {
    
    
    render () {
        const myStyle = {
          maxWidth:'443px',
          maxHeight:'443px'
        }
        return (<div className="row">
                <div classname="col-6 col-md-4" >
                    <Card>
                        <CardImg style={myStyle} top src={this.props.dish.image} alt={this.props.dish.name} />
                        <CardBody>
                            <CardTitle>{this.props.dish.name}</CardTitle>
                            <CardText className="text-center">{this.props.dish.description}</CardText>
                        </CardBody>
                    </Card>
                </div>                  
                <div className="col-6 col-md-4">
                    <h3>Comments</h3>
                    {
                        this.props.dish.comments.map( (comment) => {
                            return (
                                <div id={comment.id}>
                                    <p>{comment.comment}</p>
                                    <p>--{comment.author} , {comment.date}</p>
                                </div>
                            )
                        })
                    }    
                </div>
                </div>                                            
        );
    }
}
export default DishDetail;

https://www.w3schools.com/react/showreact.asp?filename=demo2_react_css_inline_object

user_164200180

It's a 443px unit, there is no space between 443 and px. Otherwise, the CSS will not be applied to your selected element.

<Card>
  <CardImg
    style={{ maxWidth: "443px", maxHeight: "443px" }}
    top
    src={this.props.dish.image}
    alt={this.props.dish.name}
  />
  <CardBody>
    <CardTitle>{this.props.dish.name}</CardTitle>
    <CardText className="text-center">{this.props.dish.description}</CardText>
  </CardBody>
</Card>

One more example where 10 px (with space) unit will not work.

import React from 'react';
export default class App extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10 px", // check here not applied
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Demo on Sandbox

user_138476900
Related