WordPress loop output print is wrong - wordpress

Question

I wrote a short code for wordpress but the outputs that will be printed is somehow weird
so this is my loop code
function events_accordion_shortcode($category){
// WP_Query arguments
$args = array (
'post_type' => array( 'event' ),
'post_status' => array( 'publish' ),
'nopaging' => true,
'order' => 'ASC',
'orderby' => 'menu_order',
'meta_query' => array(
array(
'key' => 'custom_page_category',
'value' => $category,
)
),
);
// The Query
$events = new WP_Query( $args );
echo '<div class="container">';
// The Loop
$first = true;
if ( $events->have_posts() ) {
echo '<ul class="responsive-table">
<li class="table-header">
<div class="col col-3">Event</div>
<div class="col col-6">date</div>
<div class="col col-6"> location</div>
<div class="col col-6">FOCUS</div>
</li>';
while ( $events->have_posts() ) {
$events->the_post();
$post_id=get_the_ID();
$mydate = get_post_meta($post_id, 'date', true);
$mylocation = get_post_meta($post_id, 'location', true);
$myfocus = get_post_meta($post_id, 'focus', true);
echo '<li class="table-row accordion">' .
'<div class="col col-3" data-label="title">' . the_title() . '</div>' .
'<div class="col col-6" data-label="date">'. $mydate .'</div>' .
'<div class="col col-6" data-label="location">'. $mylocation .'</div>' .
'<div class="col col-6" data-label="focus">'. $myfocus .'</div>' .
'<div class="col col-6" data-label="plus">
<i id="load-more" aria-hidden="true" class="fas fa-plus"></i>
</div>' .
'</li>';
echo '<li class="panel"></li>';
}
} else {
// no posts found
}
echo '</ul></div>';
}
the problem is that the "the_title()" value gets printed outside the li tag, this is the weird output I get:
<div class="container">
<ul class="responsive-table">
<li class="table-header">
<div class="col col-3">Event</div>
<div class="col col-6">date</div>
<div class="col col-6"> location</div>
<div class="col col-6">FOCUS</div>
</li>
event 1
<li class="table-row accordion">
<div class="col col-3" data-label="title"></div>
<div class="col col-6" data-label="date">13/6/2019</div>
<div class="col col-6" data-label="location"></div>
<div class="col col-6" data-label="focus">brain</div>
<div class="col col-6" data-label="plus">
<i id="load-more" aria-hidden="true" class="fas fa-plus"></i>
</div>
</li>
<li class="panel"></li>
</ul>
</div>
as you can see the post title(event 1) has been copied outside the li tag
what am I doing wrong?I dont know what to do

Answer 1

echo '<li class="table-row accordion">' .
'<div class="col col-3" data-label="title">' . get_the_title() . '</div>' .
'<div class="col col-6" data-label="date">'. $mydate .'</div>' .
'<div class="col col-6" data-label="location">'. $mylocation .'</div>' .
'<div class="col col-6" data-label="focus">'. $myfocus .'</div>' .
'<div class="col col-6" data-label="plus">
<i id="load-more" aria-hidden="true" class="fas fa-plus"></i>
</div>' .
'</li>';
echo '<li class="panel"></li>';
you have to write get_the_title(), Because you have already written echo at the beginning of li tag. Read the difference here between get_the_title() and the_title()