Forcing sync before going into a function

Question

I am trying to map an array of strings that contains img URL

but from checking logs on the way i found out that when 'pictures' array arrive to the .map,

it wont work even when i tried to put there console.log('test) seems it wont enter the function.

    const ImageList = ({pictures}) => {
        console.log(pictures)
        let picture;
        picture = pictures.map((pic) => {
            console.log(pic);
            return ( <Col sm={6} md={4}>
                    <ListGroupItem><img src={pic} alt="test"/></ListGroupItem>
                </Col>
            )
        });
        console.log(picture);
        return (
            <ListGroup>
                {picture}
            </ListGroup>
        )
    };

    export default ImageList;

result from console:

update: this is the code, @Bergi was right, when i did

the array is empty, so basically it goes into the Image List empty, how can i make it synchronize before it goes in?

  console.log(JSON.stringify(pictures));

this is the code:

    class App extends Component {

        constructor(props){
            super(props);

            this.state = {
                picturesArr: [],
                urlArr: [],
                titleArr:[],
                nextPage:'',
                prevuisPage:''
            };

            this.loadSubreddit = this.loadSubreddit.bind(this);
        }

        loadSubreddit(subre){
            let pictures = [];
            let urls =[];
            let titles=[];
            let nextpage ='';
            let pageback='';
            reddit.hot(subre).limit(5).fetch(function(res) {
                console.log(res);
                nextpage = res.data.after.toString();
                // pageback = res.data.before.valueOf();
                for(let i =0; i<res.data.children.length; i++){
                    pictures.push(res.data.children[i].data.url);
                    urls.push(res.data.children[i].data.permalink);
                    titles.push(res.data.children[i].data.title);
                }});

            this.setState({
                picturesArr: pictures,
                urlArr: urls,
                titleArr: titles,
                nextPage: nextpage,
                prevuisPage: pageback
            }, () => {
                console.log(this.state)
            });
            console.log(pictures);
            console.log(JSON.stringify(pictures));

            }


        componentWillMount() {
            console.log('comp is mounting');
            this.loadSubreddit('cats');
        }

      render() {
            return (
            <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
                <Col sm={8} md={10} smOffset={2} mdOffset={1} >
                    <ImageList picturese={this.state.picturesArr} />
                </Col>
            </div>
        );
      }
    }

    export default App;