pass_props_to_component.md

problem - the content does not appear until this.props.SOMETHING is not true or does not exists or else

we have a LogsList.js component

import React from 'react'
import {LinearProgress} from '@rmwc/linear-progress';

export default class LogsList extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        // do not show anything except <LinearProgress/>
        if (!this.props.loaded) {
            return (
                <LinearProgress determinate={false}/>
            )
        }
        
        let items = this.props.logs || [];
        // do not show anything except 'No Logs found' text
        if (itemss.length === 0) {
            return (
                <h6 className="padd-left-md">No Logs found</h6>
            )
        }
        
        return (
            <div>
                some code here
            </div>)
    }
}

in LogsList.spec.js

import React from 'react';
import {mount} from 'enzyme';
import {expect} from 'chai';
import LogsList from '../src/components/page_components/logs/LogsList';
import {Router} from "react-router";
import {createBrowserHistory} from "history";
const history = createBrowserHistory();
//
const logsFromPropsStub = [{
    some data
}];
//
const wrapper = mount(
    <Router history={history}>
        <LogsList logs={logsFromPropsStub}
                  loaded={true}
        />
    </Router>
);

describe('<LogsList/>', function () {
    // now we can search anything on our screen
    it('should have a "button"', function () {
        expect(wrapper.find("button")).to.have.lengthOf(1);
    });

});