Make business logic read like a story with lodash flow

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script>
    <script data-require="lodash.js@*" data-semver="4.17.4" src="https://unpkg.com/lodash@4.17.4/lodash.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>

// Using the _ object variable name for plunker in place of: 
// import filter from 'lodash/fp/filter';                    
// import map    from 'lodash/fp/map';
// import flow   from 'lodash/fp/flow';
const removeInappropriate = _.filter(tweet => !tweet.inappropriate);
const removeDeleted = _.filter(tweet => !tweet.deleted);
const getPropsForDisplay = _.map(({author, body}) => ({author, body}));
const tweetsForMainPage = _.flow(
    removeInappropriate,
    removeDeleted,
    getPropsForDisplay
);

const getTweetsForMainPage = () => tweetsForMainPage(tweets);





// React set up to display Tweet List
const TweetList = ({
                       tweets,
                   }) => {
    return (
        <table>
            {
                tweets.map((tweet, idx) => <Tweet key={idx} authorName={tweet.author} body={tweet.body}/>)
            }
        </table>
    );
};


const Tweet = ({body, authorName}) => (
    <tr>
        <td style={{verticalAlign:'top'}}>{authorName}:</td>
        <td>{body}</td>
    </tr>
);

class App extends React.Component {

    render() {
        return (
            <div className="App">
                <div className="App-header">
                    <h2>Tweet List</h2>
                </div>
                <p className="App-intro">
                    This is a list of tweets.
                </p>
                <TweetList tweets={getTweetsForMainPage()}/>
            </div>
        );
    }
}

const tweets = [
    {
        author: 'eddie',
        body: 'Come on , throw in a buck!',
        deleted: true,
    },
    {
        author: 'mrPink',
        body: 'Uh uh, I don\'t tip.',
    },
    {
        author: 'eddie',
        body: 'You don\'t tip?',
    },
    {
        author: 'mrPink',
        body: 'I don\'t believe in it.',
    },
    {
        author: 'niceGuyEddie',
        body: 'You don\'t believe in tipping?',
        deleted: true
    },
    {
        author: 'mrBlue',
        body: 'You know what these chicks make? They make shit',
        inappropriate: true
    },
    {
        author: 'mrPink',
        body: 'Don\'t give me that. If she doesn\'t make enough money, she can quit'
    },
    {
        author: 'mrBrown',
        body: 'Jesus Christ',
    },
    {
        author: 'mrOrange',
        body: 'He\'s convinced me, gimme my dollar back'
    },
];

ReactDOM.render(
  <App />,
  document.getElementById('example')
);

/* Styles go here */