Is it possible to render HTML in a function with React? - html

Question

I'm new to React, and I'm trying to render html with a function in React.
This is my code:
import React, { Component, useRef, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Searc from './search'
const HandleSearch = () => {
const [name, searchName] = useState("")
const [comments, getComments] = useState([])
const nameForm = useRef(null)
const onSubmitSearch = async(e) => {
e.preventDefault();
try {
// do something
} catch (error) {
console.log(error.message);
}
}
const displayComment = async() => {
try {
const form = nameForm.current
console.log(form['name'].value)
const name = form['name'].value
const response = await fetch(`http://localhost:5000/folder/${name.toLowerCase()}`)
const jsonData = await response.json()
getComments(jsonData)
} catch (error) {
console.log(error.message)
}
}
useEffect(() => {
displayComment()
}, [])
return(
<div className="container">
<div className="form-group">
<h1 className="text-center mt-5">SEARCH MY LANDLORD</h1>
<form ref={nameForm} className="mt-5" onSubmit={onSubmitSearch}>
<Search name={'name'}/>
<div className="d-flex justify-content-center">
<button type="submit" className="d-flex btn btn-primary" onClick={displayComment}>Search</button>
</div>
</form>
<div>
<div>
{/*<tr>
<td>Mary</td>
</tr>*/}
{comments.map(comment => (
<tr>
<td>{comment.problem}</td>
</tr>
))}
</div>
</div>
</div>
</div>
)
}
export default HandleSearch;
The issue I have is that the full list of comments appears before I trigger the displayComments function (once it's trigger it works).
<div>
{/*<tr>
<td>Mary</td>
</tr>*/}
{comments.map(comment => (
<tr>
<td>{comment.problem}</td>
</tr>
))}
</div>
Is it possible to render the above html in the displayComments function so nothing appears before I actually specified which data to display?

Answer 1

You need to remove the useEffect if you want the state to only be set on the button click, because as of right now the state is being set with the useEffect() which is loading when your component is first rendered.