---
myst:
html_meta:
"description": ""
"property=og:description": ""
"property=og:title": ""
"keywords": ""
---
(override-views-label)=
# Override Views
## Exercise
Overriding existing views works exactly the same as components.
Override the summary view so that the "Read more..." text is gone and is replaced by the rich text content.
````{dropdown} Solution
:animate: fade-in-slide-down
:icon: question
```jsx
/**
* Summary view component.
* @module components/theme/View/SummaryView
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from '@plone/volto/helpers';
import { Link } from 'react-router-dom';
import { Container, Image } from 'semantic-ui-react';
/**
* Summary view component class.
* @function SummaryView
* @param {Object} content Content object.
* @returns {string} Markup of the component.
*/
const SummaryView = ({ content }) => (
{content.title}
{content.description && (
{content.description}
)}
{content.items.map(item => (
{item.title}
{item.image && (
)}
{item.description && {item.description}
}
{item.text &&
item.text.data && (
)}
))}
);
/**
* Property types.
* @property {Object} propTypes Property types.
* @static
*/
SummaryView.propTypes = {
/**
* Content of the object
*/
content: PropTypes.shape({
/**
* Title of the object
*/
title: PropTypes.string,
/**
* Description of the object
*/
description: PropTypes.string,
/**
* Child items of the object
*/
items: PropTypes.arrayOf(
PropTypes.shape({
/**
* Title of the item
*/
title: PropTypes.string,
/**
* Description of the item
*/
description: PropTypes.string,
/**
* Url of the item
*/
url: PropTypes.string,
/**
* Image of the item
*/
image: PropTypes.object,
/**
* Image caption of the item
*/
image_caption: PropTypes.string,
/**
* Type of the item
*/
'@type': PropTypes.string,
}),
),
}).isRequired,
};
export default SummaryView;
```
````