How to use

Title

function

in

react-bootstrap

const PhotoModal = ({ photo, show, onHide }) => (
 photo ? (
  <Modal show={show} bsSize='large' onHide={onHide}>
   <Modal.Header closeButton={true}>
    <Modal.Title>{photo.name} by {photo.user.username}</Modal.Title>
   </Modal.Header>

   <Modal.Body>
    <img src={photo.image_url[1]} style={{ width: '100%' }} />
   </Modal.Body>
  </Modal>
 ) : null
)

// getChildContext() {
 //   const component = this;
 //   return {
 //     closeCallback: component.closeModal,
 //     currentUser: this.context.currentUser // pass on currentUser
 //   };
 // }

 renderHeader() {
  return (
   <Modal.Header closeButton>
    <Modal.Title>{this.props.title}</Modal.Title>
   </Modal.Header>
  )
 }

function ProductCard({ product }) {
 const line = useReselect(makeGetCartLine, { productId: product.id });

 return (
  <Card style={{ width: "18rem" }} data-testid="product-card">
   <Card.Img variant="top" src={product.image} />
   <Card.Body>
    <Card.Title>{product.name}</Card.Title>
    <Card.Text>{product.price} €</Card.Text>
   </Card.Body>
   <Card.Footer>
    {line ? <SeeCart /> : <BuyProduct product={product} />}
   </Card.Footer>
  </Card>
 );
}

render() {
    return (
      <Modal show={this.props.modal_delete.show}>
        <Modal.Header>
          <Modal.Title>
            Are you sure you want to delete <span>{this.props.modal_delete.username}</span>?
          </Modal.Title>
        </Modal.Header>
        <Modal.Footer>
          <Button onClick={this.userDelete}>Yes</Button>
          <Button onClick={this.modalHide}>No</Button>
        </Modal.Footer>
      </Modal>
    )
  }

renderCategoryEditModal(category, index) {
  
  const CategoriesEditForm = Telescope.components.CategoriesEditForm;

  return (
   <Modal key={index} show={this.state.openModal === index+1} onHide={this.closeModal}>
    <Modal.Header closeButton>
     <Modal.Title>Edit Category</Modal.Title>
    </Modal.Header>        
    <Modal.Body>
     <ContextPasser currentUser={this.context.currentUser} closeCallback={this.closeModal}>
      <CategoriesEditForm category={category}/>
     </ContextPasser>
    </Modal.Body>
   </Modal>
  )
 }

// Cada película que aparece en el home
const MoviePreview = props => (
  <div className="card">
    <Card.Img variant="top" alt={props.movie.title} src={
      props.movie.poster_path ?
      `https://image.tmdb.org/t/p/w500${props.movie.poster_path}`
      : '/default-movie.jpg'
    } />
    <Card.Body>
      <Card.Title className="card-text">{props.movie.title}</Card.Title>
      <Card.Text className="card-text">
        {props.movie.release_date}
      </Card.Text>
      <Link to={`/movie/${props.movie.id}`} className="to-bottom btn btn-dark btn-block">Visit</Link>
    </Card.Body>
  </div>
)

const getPanels = () => (
 Panels.map((card) => (
  <Panel id={card.id} key={`panel-${card.id}`} defaultExpanded>
   <Panel.Heading>
    <Panel.Title toggle>
     {card.header}
    </Panel.Title>
   </Panel.Heading>
   <Panel.Body collapsible>
    {card.component}
   </Panel.Body>
  </Panel>
 ))
)

function CardItem(props) {
  return (
    <Card>
      <Card.Img variant="top" src={props.item.url} />
      <Card.Body>
        <Card.Title>{props.item.title}</Card.Title>
        <Button 
          variant="primary"
          onClick={() => props.changeCounter()}
        >
          Buy photo {props.item.id}
        </Button>
      </Card.Body>
    </Card>
  );
}

const CustomModal = props => {
 const { title, body, handleSave } = props;
 return (
  <div className="static-modal">
   <Modal.Dialog>
    <Modal.Header>
     <Modal.Title>{title}</Modal.Title>
    </Modal.Header>

    <Modal.Body>{body}</Modal.Body>

    <Modal.Footer>
     <Button>Close</Button>
     <Button bsStyle="primary" onClick={handleSave}>
      Save changes
     </Button>
    </Modal.Footer>
   </Modal.Dialog>
  </div>
 );
}

let Posts = (props) => {
  let listItems = props.posts.map((item) =>
    (<Panel bsStyle="primary">
      <Panel.Heading>
        <Panel.Title componentClass="h3">{item.title}</Panel.Title>
      </Panel.Heading>
      <Panel.Body>{item.description}</Panel.Body>
    </Panel>)
  );

  return (
    <div>
      <PageHeader>
        Posts <small>List of posts</small>
      </PageHeader>
      {listItems}

    </div>
  )
}

render() {
    return (
      <div>
        <Modal show={this.props.show} onHide={() => this.props.onClose()}>
          <Modal.Header closeButton>
            <Modal.Title>{this.props.title}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {this.props.children}
          </Modal.Body>
        </Modal>
      </div>
    );
  }

const Component1 = () => {
  return (
  <Card style={{ width: '18rem' }}>
    <Card.Img variant="top" src="../slike/slika_primjer1.jpg" />
    <Card.Body>
      <Card.Title>Card Title</Card.Title>
      <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
      </Card.Text>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>
);

}

render() {
    const { actor } = this.props;

    return (
      <div>
        <Card>
          <Card.Img variant="top" src={actor.imageURL} />
          <Card.Body>
            <Card.Title>{actor.name}</Card.Title>
          </Card.Body>
        </Card>
      </div>
    )
  }

renderSettingsModal() {
  
  const SettingsEditForm = Telescope.components.SettingsEditForm;

  return (
   <Modal show={this.state.modalOpen} onHide={this.closeModal}>
    <Modal.Header closeButton>
     <Modal.Title>Edit Settings</Modal.Title>
    </Modal.Header>        
    <Modal.Body>
     <ContextPasser currentUser={this.props.user} closeCallback={this.closeModal}>
      <SettingsEditForm/>
     </ContextPasser>
    </Modal.Body>
   </Modal>
  )
 }

renderCategoryNewModal() {
  
  const CategoriesNewForm = Telescope.components.CategoriesNewForm;

  return (
   <Modal show={this.state.openModal === 0} onHide={this.closeModal}>
    <Modal.Header closeButton>
     <Modal.Title>New Category</Modal.Title>
    </Modal.Header>        
    <Modal.Body>
     <ContextPasser currentUser={this.context.currentUser} closeCallback={this.closeModal}>
      <CategoriesNewForm/>
     </ContextPasser>
    </Modal.Body>
   </Modal>
  )
 }